Toggle a "paper-dialog" inside a "dom-repeat"

Question

I have a "paper-dialog" object in a page. I can toggle it by a button if it is not inside a "dom-repeat" loop. But if I put it in a loop, "this.$.dialog.toggle();" will then referring to null.

  <template is="dom-repeat" items="{{news}}" index-as"index">
    <paper-dialog id="dialog"><h3>{{item.date}}</h3></paper-dialog>
    <paper-button on-tap="toggleDialog">View {{item.name}}</paper-button>
  </template>

and

  toggleDialog: function(e) {
      this.$.dialog.toggle();
    }

Any idea why "this.$.dialog" become null after placing the dialog in a loop?

Answer 1

this.$ won't work. You have to call this.$$ which is equal to Polymer.dom(this.root).querySelector();

plus, you have multiple elements with same ID which is absolutely against html standards.

So you can do something like:

  <template is="dom-repeat" items="{{news}}" index-as"index">
    <paper-dialog id="dialog" indexDialog$='[[index]]'><h3>{{item.date}}</h3>
    </paper-dialog>
      <paper-button on-tap="toggleDialog" index$='[[index]]'>View {{item.name}}
    </paper-button>
  </template>

and toggleDialog

  toggleDialog: function(e) {
      var index = e.target.getAttribute("index");
      this.$$('[indexDialog="'+index+'"]').toggle();
  }

you have to set some indetification (index attribute) , then in function you can get this attribute by calling e.target.getAttribute and the last step is to find paper-dialog with the same value inside indexDialog attribute by calling this.$$('[indexDialog="'+index+'"]')

Answer 2

I found my solution by adding an "array-selector", so "paper-dialog" outside the loop and is only having 1 instance. (and we feed different data into it).

<array-selector id="selector" items="{{news}}" selected="{{selected}}"></array-selector>
<paper-dialog id="dialog" entry-animation="scale-up-animation"
exit-animation="fade-out-animation">......

and with an assignment inside the toggle function

  toggleDialog: function(e) {
    var item = this.$.news.itemForElement(e.target);
    this.$.selector.select(item);
    this.$.dialog.toggle();
  },