ember.js - 对象属性数组(服务器上的枚举)和 ember 复选框组之间的双向绑定(bind)

Question

我正在寻找一种解决方案，将包含字符串数组(表示服务器上的枚举)的对象属性绑定(bind)到复选框列表。绑定(bind)应该是双向的。

在服务器上，我们有一些枚举定义，例如具有值“ADMIN”、“GUEST”、“USER”的角色。一个用户对象可能有多个这样的角色，因此 Ember 中的用户对象的形式为

App.User = Ember.Object.create({
    roles: ["USER", "ADMIN"]
});

在用户管理中，应该有一组复选框。每个角色一个复选框。因此，可以不选择、选择全部或选择多个。

我知道有 Ember.Checkbox View 可以用于此目的。我正在寻找一个简单且通用的 View 来处理上面提到的任何类型的枚举。

因此，问题是:

• 有人对此有好的解决方案吗？
• 有人知道为 ember 提供此类扩展的开源项目吗？

提前致谢。//酸碱度

Answer 1

如果您愿意手动同步服务器和客户端上的枚举(使用 AJAX)，则可以使用纯 Ember.js 实现处理 Ember 对象和复选框之间双向绑定(bind)的通用方法，无需任何插件或 WebSocket)。请注意，Ember 可以在同步后自动更新带有复选框的选项列表。

因此，从今往后，我将假设您有一个枚举，其角色作为 Ember 数组:

App.Roles = [ "USER", "ADMIN", "GUEST" ];

然后我们将在 CollectionView 中向用户显示可用的选项像这样(模板如下)。

OptionsView = Em.CollectionView.extend({
    contentBinding: 'App.Roles',  // Show a list of _all_ available roles
    userBinding: 'App.User',      // This points to the active user
    tagName: 'ul',                // Shown as a <ul>
    itemViewClass: Em.View.extend({
        userBinding: 'parentView.user',  // For convenience
        templateName: 'user-roles' // Defined later
    })
});

每个选项的模板是:

<script data-template-name="user-roles" type="text/x-handlebars">
  <label> {{view App.RoleCheckbox 
            contentBinding="view.content"}} 
  {{view.content}}
  </label>
</script> 

请注意使用<label>标签确保复选框的 click单击标签上的任意位置会触发事件。

最后是App.RoleCheckbox是 Ember.Checkbox 的扩展处理 checked 的类属性(property)和click切换角色的事件:

App.RoleCheckbox = Em.Checkbox.extend({
    userRolesBinding: 'parentView.user.roles', // Points to the roles of the user

    checked: function () {
        var userRoles = this.get('userRoles');
        return userRoles.contains(this.get('content'));
    }.property('content', 'userRoles.@each'),

    click: function (evt) {
        var isPresent = this.get('checked'),
            userRoles = this.get('userRoles'),
            role      = this.get('content');

         if (!isPresent) { 
             userRoles.pushObject(role); 
         } else {
             userRoles.removeObject(role);
         }
     }
});

一个有效的例子是:http://jsfiddle.net/BLQBf/ (查看控制台查看日志消息)

请注意，这并不完全是 Ember 式的，因为 View 正在执行 controller 的部分工作。 。理想情况下，click事件将调用 RoleCheckboxController 上的函数这将对 User 进行更改对象。