Question

目前我正在玩最新的ember.js版本，我正在构建一个简单的“添加用户名/删除用户名”hello world app。到目前为止，我可以添加一个用户（使用下面的控制器方法）。我在html中也有一个复选框，当点击时应该删除用户但是...现在我只能获得复选框的bool值来传递。相反，我需要用户名来查找并将其从控制器内容中删除。

如何重新执行下面的html / view代码，以便我可以传递实际用户名而不是bool值？

提前谢谢！

    PersonApp.ModifyPersonCheckbox = Em.Checkbox.extend({
      change: function(event) {
        PersonApp.personController.removePerson(this.$().val());                                     
      },
    });

    PersonApp.personController = Em.ArrayProxy.create({
      content: [],

      createPerson: function(username) {
        var person = PersonApp.Person.create({ username: username });
        this.pushObject(person);
      },

      removePerson: function(username) {
        person = this.content.findProperty('username', username);
        this.removeObject(person);
      }

    });

下面的基本html显示了我的checkedBinding是如何连接的

<ul>
  {{#each PersonApp.personController}}
    <li {{bindAttr class="isActive"}}>
      <label>                                                                              
        {{view PersonApp.ModifyPersonCheckbox checkedBinding="isActive"}}
        {{username}}
      </label> 
    </li>
  {{/each}}
</ul>

Answer 1

您需要在显示复选框的视图上设置内容，以便在触发事件时传递上下文。我相信这会奏效：

{{view PersonApp.ModifyPersonCheckbox contentBinding="parentView.content" checkedBinding="isActive"}}

然后，change函数中的事件变量将包含一个上下文变量，其中包含与该复选框关联的记录。那你甚至不需要在控制器中搜索它。您也可以绑定用户名，但这种方式更清晰。

Answer 2

最终解决方案如下所示（注意contentBinding =“this”加成标记）

    PersonApp.ModifyPersonCheckbox = Em.Checkbox.extend({
      content: null,
      change: function(event) {
        PersonApp.personController.removePerson(this.content);                                     
      },
    });

    PersonApp.personController = Em.ArrayProxy.create({
      content: [],

      createPerson: function(username) {
        var person = PersonApp.Person.create({ username: username });
        this.pushObject(person);
      },

      removePerson: function(person) {
        this.removeObject(person);
      }

    });

<ul>
  {{#each PersonApp.personController}}
    <li {{bindAttr class="isActive"}}>
      <label>                                                                              
        {{view PersonApp.ModifyPersonCheckbox contentBinding="this" checkedBinding="isActive"}}
        {{username}}
      </label> 
    </li>
  {{/each}}
</ul>

检查Ember.Checkbox时如何从控制器中删除对象

2 个答案: