具有动态生成ID的复选框上的Ember.js操作

Question

在Ember.js 2.11模板中，我有一个在模型上迭代的每个循环。 在其中放置一个输入复选框，其中包含动态生成的ID（例如“ chk-” + row_model.id）。 此复选框与任何模型选项均不相关，但是仅启用/禁用（也许使用CSS类）具有相同样式动态生成的ID（例如“ txt-” + row_model.id）的另一个输入文本。

我怎样才能做到这一点？

Answer 1

模板：

{{#each model as |row|}}
    <div>
       <input type="checkbox" id="chk-{{row.id}}" 
            onchange={{action (action "checkboxChanged" row.id) value="target.checked"}}> 
     <input disabled type="text" id="txt-{{row.id}}">
  </div>
{{/each}}

控制器/组件：

  actions: {
    checkboxChanged(rowId, isChecked) {
      Ember.$('#txt-' + rowId).prop('disabled', !isChecked);
    }
  }

灰烬小提琴

您也可以在模型中使用一些人工属性（例如_checked ）。 或者，更好的是编写一个组件。 因此，可以使用以下组件重写前面的示例：

签input.hbs：

<input type="checkbox" onchange={{action (mut isChecked) value="target.checked"}}> 
<input disabled={{isDisabled}} type="text">

签input.js：

import Ember from 'ember';

export default Ember.Component.extend({
  isDisabled: Ember.computed.not("isChecked")
});

使用它：

{{#each model as |row| }}
   {{checked-input row=row}}
{{/each}}

灰烬小提琴

基本上，如果可能，请避免直接操作DOM。