1

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

如何重新执行下面的 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>
4

2 回答 2

1

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

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

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

于 2012-08-31T02:35:32.330 回答
1

最终解决方案如下所示（注意 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>
于 2012-08-31T04:00:31.247 回答