Question

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

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

形式

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

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

我知道可以使用Ember.Checkbox视图。我正在寻找的是一个简单而通用的视图来处理上面提到的任何类型的枚举。

因此，问题是：

有人为此提供了一个很好的解决方案吗？
有没有人知道为ember提供此类扩展的开源项目？

提前致谢。 // ph

Answer 1

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

所以今后，我将假设你的角色为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>代码可确保在点击代码上的任何位置时触发Checkbox的click事件。

最后，App.RoleCheckbox是Ember.Checkbox类的扩展，它处理checked属性和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-esque，因为View正在执行controller的部分工作。理想情况下，click事件会调用RoleCheckboxController上的一个函数，该函数会对User对象进行更改。

对象属性数组（服务器上的枚举）和ember复选框组之间的双向绑定

1 个答案: