CODEWITHSUNDEEP
aurelia
Grofit
Grofit

Reputation: 18445

Aurelia not outputting attribute with string interpolation in repeat

Is there any reason why a repeat.for binding would remove attributes from elements inside the repeater?

<div repeat.for="i of model.someArray.length">
    <label>Some Array - Index ${i + 1}</label>
    <input value.bind="model.someArray[i]" some-custom-attribute="someArray[${i}]"/>
</div>

and that some-custom-attribute is not being output within the repeat, but if I were to remove the string interpolation within there then it outputs fine.

== Edit ==

I have put it in a comment but just to make sure everyone is on the same page, ideally this is the output I expect:

<input value.bind="model.someArray[i]" some-custom-attribute="someArray[0]"/>

The some-custom-attribute is not an aurelia attribute, its pure HTML that a 3rd party JS library uses, so the goal here is to get the textual value of the index into the textual attribute value.

Upvotes: 1

Views: 704

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10887

model.someArray.length is a number, not an array. You need to iterate over the array. If you do need the current index, the repeater provides the $index property for you to use.

Your code should look like this:

<div repeat.for="item of model.someArray">
    <label>Some Array - Index ${$index + 1}</label>
    <input value.bind="item" some-custom-attribute.bind="item"/>
</div>

To answer your original question, doing some-custom-attribute="model.someArray[${i}]" makes Aurelia think you are trying to pass a string value to the custom attribute. You can see that in the following gist: https://gist.run/?id=eed8ac8623ff4749aa5bb93c82a7b1fb I've created a custom element that just pushes whatever value it is given in to an element on the page. Note!!! Don't ever do what I'm doing here! I just did this this way so you wouldn't have to open the js console. To actually get a value passed in, you would need to use some-custom-attribute.bind="item" or (to do things how you are doing things, some-custom-attribute.bind="someArray[i]"

Upvotes: 2

Related Questions