對象屬性數組（枚舉在服務器上）和餘燼複選框組之間的雙向綁定

Question

我正在尋找一種解決方案，將包含字符串（表示服務器上的枚舉）數組的對象屬性綁定到複選框列表。綁定應該是雙向的。

在服務器上，我們有一些枚舉定義，例如角色的值爲「ADMIN」，「GUEST」，「USER」。用戶對象可以具有幾個這樣的角色，從而在灰燼中的用戶對象的形式爲

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

在用戶管理，應該有一組複選框的。每個角色一個複選框。因此，可以選擇全部或者幾個。

我知道有Ember.Checkbox視圖可用於此目的。我正在尋找的將是一個簡單而通用的視圖來處理上面提到的任何一種枚舉。

因此，問題是：

• 有人來過這個一個很好的解決方案？
• 有沒有人知道一個開源項目提供這樣的擴展到燼？

在此先感謝。 // ph

Answer 1

如果您願意同步服務器和客戶端上的枚舉，則可以使用普通的Ember.js實現處理Ember對象和複選框之間雙向綁定的通用方法，而無需任何插件手動（使用AJAX或WebSockets）。請注意，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財產和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式的，因爲視圖正在爲controller做一部分工作。理想情況下，click事件將調用RoleCheckboxController上的函數，該函數將更改User對象。