Easier way to get the index value in a repeat template in js?

[danel...@hotmail.com]

I am trying to convert Knockout contacts example to Polymer just for reference and was wondering if there is an easier method to get the selected index of a row.

Here is the Knockout example I am converting http://jsfiddle.net/rniemeyer/gZC5k/

Here is what I am working on http://jsbin.com/yubigo/2/edit?html,output

I know I can find the index by using something like this, this would be for deleting a contact

removeContact: function(e, detail, sender){
 var obj = e.target.templateInstance.model.row;
 var found_index = this.data.indexOf(obj);
 if (found_index !== -1) {
  this.data.splice(found_index,1);
 }
}

Or if I want to pass the index from the template I can do something like using the       polymer index syntax and assigning it to a html5 data attribute such as data-idx

<template repeat='{{c,idx in data}}'><tr>
 <td>
 <input value='{{idx}}' />
 <input value='{{c.firstName}}' />
 <div><a href='javascript:;' on-tap='{{removeContact}}' data-idx='{{idx}}'>Delete</a></div>
 </td>
 <td><input value='{{c.lastName}}' /></td>
</tr>
</template>



But having to add the polymer index syntax and data- attribute or having to search for the index in js each time is a little bit of a pain especially since Polymer already has the index for the selected row.

Is the selected index exposed in js somewhere that I am missing?

[Eric Bidelman]

<template repeat='{{c,idx in data}}'> creates a named scope with "c" and "idx" in that scope. Similar to how you can the model "c"  in removeContact(), you can do the same if you include the idx:

sender.templateInstance.model.idx

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/39434bd7-5269-44cc-902e-06517a081c64%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[danel...@hotmail.com]

Thanks Eric, that works great!

[danel...@hotmail.com]

Eric,

One further question,

How do you get the parent template index.  To remove Phones from the Contact I need the Contact index, from your example I can get the current template (Phones) index but I also need the containing parent (Contacts) index

See http://jsbin.com/yubigo/5/edit?html,output, look at the removePhone function.

In the debugger I can see the parent model it looks to be an auto-generated id, with no easy way to access?  

Thanks,

Dan

On Sunday, December 14, 2014 1:49:12 AM UTC-5, dele...@gmail.com wrote:

[Eric Bidelman]

Can't you use a similar approach? Define an index in the repeat.

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/61fb2ef2-ad0e-42d5-94f3-f17946485dec%40googlegroups.com.

[danel...@hotmail.com]

Yes I did do that but that gives me the index for the Phones array that is a sub array of Contacts.  So I have the index of the Phones array to remove but I need the Contact index that the Phones array is attached to

http://jsbin.com/yubigo/edit?html,output

 removePhone: function(e, detail, sender){
          var contactIdx = parseInt(sender.templateInstance.model.c.idx)
          var phoneIdx = parseInt(sender.templateInstance.model.idx)
          this.data[contactIdx].splice(phoneidx,1);

When you click on a particular phone to delete from a contact it calls the above function. You can see that in order to remove the phone that I have the index for, I need to have the contact index as well.  But in this function I only have access to the model associated with the Phones and not the Contact.  Is there a way to traverse up the templateInstance chain to get the templatInstance associated with the Contact? 

On Sunday, December 14, 2014 1:49:12 AM UTC-5, dele...@gmail.com wrote:

[Daniel Llewellyn]

you are redefining the idx variable so you cannot reference the outer-template's index - try changing the outer-template idx variable name:

http://jsbin.com/piwetotego/1/edit?html,output

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/d95ef006-ead5-49d6-8175-f78fc543d9b8%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Daniel Llewellyn
Bang Communications Limited
t: 01256 370 952

[danel...@hotmail.com]

Daniel,

Thank you, that is it, can't believe I didn't see that.  Also strange in the debugger cidx does not show up as a property of the model, even though you can access it.  I think I had actually tried this but since I didn't see it in the debugger I thought it didn't work.

Thanks Daniel and Eric for your help!

On Sunday, December 14, 2014 1:49:12 AM UTC-5, dele...@gmail.com wrote: