Aurelia repeat.for two-way binding

Question

I am new to Aurelia Js and am using repeat.for for list some text boxes, which may contain some values. Here,listed text-box is fine, problem is am using value.bind to bind the previous value/ new value (user input) while typing in text-box, it applying for all model( for all i.companyname)

code :

<div class="row" repeat.for="i of experience_array">
    <input type='text' value.bind='i.companyname'/>
    <input type='text' value.bind='i.experience'/>
</div>

Also tried :

<div class="row" repeat.for="i of experience_array.length">
    <input type='text' value.bind='$parent.experience_array[i]['companyname']'/>
    <input type='text' value.bind='$parent.experience_array[i]['experience']'/>
</div>

How to fix this? Guess, am missing something in aurelia binding concept.

Can't reproduce this: gist.run/?id=196d22b7eef6d461b19924ef6fd4cc07 — Matthew James Davis
Hi @MatthewJamesDavis , here is my exact scenario. Updated the GitRun gist.run/?id=a11f8500803a7b6053f980b7aaa48165 — sibi
while click the ADD button, am pushing new obj to array. Here the model updating same value. Thanks and do needful. — sibi
would need to look at the JS file to see exactly what you're trying to do., but from what I can see, you shouldn't be binding $parent.experience_array like that — Danny

Arne Deruwe Arne Deruwe · Accepted Answer · 2016-08-04T10:55:18

You are pushing an existing object reference (obj) into your list on add, so you are basically adding the same object every time. Therefore, when you edit this object, it will update on all the ui components bound to this object.

When you click add, I'm guessing you want to add a new object. You should create a company class and push a new instance of this class to the list instead of the same obj.

Example: https://gist.run/?id=2237595bdde46cee4658cc14873050d7

Aurelia repeat.for two-way binding

1 Answers