时间戳

首页 > 解决方案 > ember.js 列表中的多选复选框

javascript - ember.js 列表中的多选复选框

问题描述

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

我的应用程序.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

标签： javascriptember.js

解决方案

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

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'));
})

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

推荐阅读