Change value in object within array in array with Ember.js 1.13

Question

In my application, I have a structure with objects within an array in a array. The objects are called AND rules, the array with objects are called OR rules. The structure looks like this:

matching: [
  [ // OR rule
    { // AND rule
      name: "rule #1.1",
      value: "test"
    },
    { // AND rule
      name: "rule #1.2",
      value: "test B"
    }
  ],
  [ // OR rule
    { // AND rule
      name: "rule #2.1",
      value: "test C"
    }
  ]
]

When I try to change one of the values, Ember changes all the values. For example, if I change the value of rule #1.2 to "Test value", the values of rule #1.1 and rule #2.1 also change to "Test value". I use the following code to set the values:

setValue (andIndex, orIndex, value) {
  var orRule = this.get('matching').objectAt(orIndex);
  var andRule = orRule.objectAt(andIndex);
  Ember.set(andRule, 'value', value.target.value);
}

The template where I change the values looks like this:

{{#each matching as |orRule orIndex|}}
  {{#each orRule as |andRule andIndex|}}
    <input type="text" onkeyup={{action 'setValue' andIndex orIndex value=value}}>
  {{/each}}
{{/each}}

My question is: I would like to change only the one value I change. How do I do this? Note: I use Ember.JS 1.13.

Answer 1

You don't need to action. Just set value in input helper

{{#each matching as |orRule orIndex|}}
  {{#each orRule as |andRule andIndex|}}
    {{input value=andRule.value}}
  {{/each}}
{{/each}}

UPDATE

Please check this out.