ember computed in input value from each loop

Question

i have a input element on ember, while the value is come from each condition

{{#each items as |item|}}
        <div class="form-group">
          <label class="col-sm-3 control-label">Judul {{item.no}}</label>
          <div class="col-sm-9 input-group">
            {{input class="form-control" value=item.title placeholder="Tambah judul" type="text"}}
            <span class="input-group-btn">
              <a class="btn btn-default remove_detail" type="button" onclick={{action 'decreaseTitle'}}><i class="fa fa-times"></i></a>
            </span>
          </div>
        </div>
{{/each}}

i just wanna "watch" while the input in value=item.title has change from ember computed. how to do that ?

Could you explain better the question, I really don't get it. Anyway probably you should put brakets around item.title ==> {{item.title}} — rakwaht, Apr 05 '17 at 09:17
What are you going to do after watching `item.title` change ? — Ember Freak, Apr 05 '17 at 11:07

score 1 · Accepted Answer · answered Apr 05 '17 at 10:59

Please see the following twiddle for an illustration of a computed property definition that is dependent on a property of an item within an array. You can check application.js controller.

Ember.computed('items.@each.title', function(){...})

does the trick for you.

score 0 · Answer 2 · answered Apr 05 '17 at 10:21

If you want to watch something deep inside an array dynamically, it is better to wrap those logics using a component:

{{#each items as |item|}}
        <div class="form-group">
          <label class="col-sm-3 control-label">Judul {{item.no}}</label>
          <div class="col-sm-9 input-group">
            {{my-input item=item}}
            <span class="input-group-btn">
              <a class="btn btn-default remove_detail" type="button" onclick={{action 'decreaseTitle'}}><i class="fa fa-times"></i></a>
            </span>
          </div>
        </div>
{{/each}}

here, my-input will be your component having those logics and in the component's .js file,

computedProperty: Ember.computed('item.title', {
  //your logics goes here...
};

and in the component's template file,

{{input class="form-control" value=item.title placeholder="Tambah judul" type="text"}}

and any other logics which has to be binded can be implemented within the component's scope itself

@rakwaht, item.title need not to be enclosed with braces as it is inside an another helper (input)

ember computed in input value from each loop

2 Answers2