javascriptdompolymerpolymer-1.0dom-repeat

Access parent dom-repeat item on clicking child dom-repeat item


I am using polymer.I have array of objects it looks

[{
  name:xxx,
  address:yyy,
  times:[
        {start:12,
         End:5
        },
        {start:2,
         End:4
        }
       ]
},
{//same format repeats
}
]

I used nested dom-repeat,

 <template is="dom-repeat" items="{{pList}}" as="list">
          <paper-item>
              <paper-item-body two-line>
                <div>[[list.address]]</div>
                <div secondary>[[list.name]]</div>
              </paper-item-body>
            <template is="dom-repeat" items={{list.times}} as="time">                
                  <paper-item-body  on-tap="_handleTime" two-line>
                    <div>[[time.start]]</div>
                    <div>[[time.end)]]</div>
                  </paper-item-body>
            </template>
          </paper-item> 
   </template>

I have on tap function in second dom-repeat,so on taping below function is called,here I can access time object. how can I access name and address which is in first dom-repeat using with 'e' reference as bellow? I tried parentElement but its not working!

      _handleTime:function(e) {
         console.log(e.model.time); //displays time obj i.e {start:12,End:5} but I'm trying to get {name,address,{start,end}}
         console.log(e.parentElement);//gives error
         //I'm trying to get entire object like {name:xxx,address:yyy,times:[]}

     }

Solution

  • var item = this.$.firstRepeat.itemForElement(e.target);
    

    where firstRepeat is the id of the first dom-repeat,

    check this example