ember.js列表中的Mutliselect复选框

时间:2018-12-02 12:38:41

标签: javascript ember.js

所以我有一个待办事项列表,我需要为每个待办事项添加一个复选框,然后在选中该复选框时获取 todo.title

我的 application.hbs

        {{#each model as |todo|}}
      <li class="list_shopping li_num_0_1">

                            <div class="col_md_3_list">
                                <div class="cont_text_date">

                                        {{input type="checkbox"}}               
                                        {{todo.title}}


                                </div>

                            </div>
                        </li>
                        {{/each}}

我的 application.js

 export default Route.extend({
      newTodo: "",
      actions: {

      model() {
        return this.store.findAll("todo");
      }
    });

有什么想法吗? 我尝试了很多解决方案,但没有一个https://guides.emberjs.com/v1.10.0/getting-started/marking-a-model-as-complete-incomplete/有效 https://ember-twiddle.com/b0e9cab25764e50c122ca482776bdae3?openFiles=routes.application.js%2C

1 个答案:

答案 0 :(得分:0)

解决方案很容易。您需要做的是捕获复选框输入触发的事件。然后在控制器中,您需要捕获该事件并更改checked = true的属性,然后它将获得checked的状态,您可以创建一个观察器来处理要列出的模型的属性。例子

Todos have todo[] 
todo has a property todo.isselected

当您放入数组时,可以执行以下操作

  {{input type='checkbox' id='todo.id' checked=todo.isselected}}

在控制器中,有一个todo.isselected的观察者(model.isselected-您使用的本地模型名称是什么) 例子

captureNameWhenSelected: observer ("todo.isselected", function(){
     arrayOfNames.pushObject( this.get('todo.id') ,this.get('todo.name'));
})

希望这将有助于解决您的问题