8

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

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

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

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

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

因此，问题是：

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

提前致谢。// ph

4

1 回答 1

8

如果您愿意手动同步服务器和客户端上的枚举（使用 AJAX 或 WebSockets），则可以使用普通的 Ember.js 来实现处理 Ember 对象和复选框之间的双向绑定的通用方法，而无需任何插件. 请注意，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 式的，因为 View 正在做部分工作，这意味着controller. 理想情况下，该click事件将调用一个函数，该函数RoleCheckboxController将对对象进行更改User。

于 2013-02-02T21:15:26.967 回答