Question

在Ember.js 2.11模板中，我有一个每个循环，它在模型上迭代。在其中我放置一个输入复选框whit动态生成的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);
    }
  }

Ember Twiddle

您也可以在模型中使用一些人工属性（如_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}}

Ember Twiddle

基本上，如果可能的话，避免直接操纵DOM。

Ember.js操作复选框，动态生成id

1 个答案: