repeat index

[lira...@gmail.com]

Hello, i am having some issues with the following code.(just for test purposes)

<polymer-element name="card-board">

<template>

      <template repeat="{{card, cardIndex in cardArr}}">

        test {{cardIndex}}, <!-- output: test 1, test 2, -->

        <card-item index="{{cardIndex}}" indexedName="{{getCardIndexedName(card,cardIndex)}}"></card-item>

      </template>

</template>

<script>

        (function () {

          Polymer("card-board", {

            cardArr: [

              card: {

                name: "test"

              },

              card: {

                name: "test"

              }

            ],

            getCardIndexedName: function (card,index) {

              //index is undefined..

              return card.name + index;

            }

          });

        })();

    </script>

</polymer-element>

I am trying to send cardIndex as function parameter to the getCardIndexedName function. for some reason it is undefined within the function.

point worth mentioning is that the "card-item" index attribute does recive the cardIndex value.

any ideas why?

thanks.

[Arthur Evans]

When I run this, I get a syntax error.  The problem is that the array is using object syntax. Remove the "card:" before each of the objects in the array, and it works fine for me: 

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

Cheers,

Arthur

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/0b3942c3-14b5-46c4-aa6a-74b7af738b2a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[lira...@gmail.com]

hello Arthur,

first, thanks alot for answring.

sorry for the syntax error, i wrote it fast and didn't notice.

let me clear my question.

i've edited the jsbin

http://jsbin.com/zuqojokamo/2/edit

lets say we have another javascript file.

and that getCardIndexedName calls app.getCardIndexedName with the card item and the index.

app.getCardIndexedName returns a string.

the thing is when i call app.getCardIndexedName the index is undefined for the first 2 times. (there are 4 calls for some reason)

i think it happens because the index is not yet defined because the polymer isn't yet ready. 

but still the thing is that there are 4 calls(2 before polymer ready, and 2 after). my question is why? and how can i fix this issue.

thanks again.

[Daniel Llewellyn]

On 19 December 2014 at 10:19, <lira...@gmail.com> wrote:

hello Arthur,

first, thanks alot for answring.

sorry for the syntax error, i wrote it fast and didn't notice.

let me clear my question.

i've edited the jsbin

http://jsbin.com/zuqojokamo/2/edit

lets say we have another javascript file.

and that getCardIndexedName calls app.getCardIndexedName with the card item and the index.

app.getCardIndexedName returns a string.

the thing is when i call app.getCardIndexedName the index is undefined for the first 2 times. (there are 4 calls for some reason)

i think it happens because the index is not yet defined because the polymer isn't yet ready. 

but still the thing is that there are 4 calls(2 before polymer ready, and 2 after). my question is why? and how can i fix this issue.

thanks again.

I believe the reason for doubling up is the first two are fired when the element is created but the data hasn't propagated yet, and the second two are fired when the data is identified as changed and applied to the template.

(NOTE: I'm not a core polymer dev, just a watcher and sometime consumer, and therefore my theory above may be invalid.)

--

Daniel Llewellyn
Bang Communications Limited
t: 01256 370 952

[Arthur Evans]

I think Daniel's on the money here. By adding lifecycle callbacks to the card-item object, I can see that the card-item's index property isn't set until the card-item is actually added to the DOM (that is, when the attached callback is called).

If you really need to avoid the extra calls to getCardIndexedName(), you could delay calling it until the index is set. For example, define an indexChanged handler in the card-item and call getCardIndexedName there.

Here's a version of that:

http://jsbin.com/kizexo/2/edit

Hope this helps.

Cheers,

Arthur 

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/CABtuYwceOVAb8a5q6-XWHSeFut%2ByiHE%3DxOe1S405rnn1hNwr7w%40mail.gmail.com.

[lira...@gmail.com]

great,

thanks alot guys!