オブジェクト属性配列（サーバー上の列挙型）とエバーチェックボックスグループ間の双方向バインド

Question

文字列（サーバー上の列挙型を表す）を含むオブジェクト属性をチェックボックスのリストにバインドするソリューションを探しています。バインディングは双方向でなければなりません。

サーバー上には、「ADMIN」、「GUEST」、「USER」の値を持つロールなど、いくつかの列挙型定義があります。ユーザオブジェクトは、このような役割のいくつかを有していてもよく、従ってエンバー内のユーザーオブジェクトは、チェックボックスのグループが存在すべきである、形式のユーザ管理において

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

あります。ロールごとに1つのチェックボックス。したがって、none、all、またはいくつかを選択することは可能です。

私はこれに使用できるEmber.Checkboxビューがあることを知っています。私が探しているのは、上記のようなあらゆる種類の列挙型を処理するための簡単で一般的なビューです。

したがって、ご質問は以下のとおりです。

• 誰かがこのための良い解決策がありますか？
• 誰かがemberにそのような拡張機能を提供するopensourceプロジェクトを知っていますか？

ありがとうございます。 // ph

Answer 1

Emberオブジェクトとチェックボックス間の双方向バインディングを処理する一般的な方法は、サーバーとクライアント上の列挙型を同期させたい場合は、プラグインを必要とせずにプレーンEmber.jsを使用して実装できます手動（AJAXまたはWebSocketを使用）。 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が役割を切り替えcheckedプロパティとclickイベントを処理Ember.Checkboxクラスの拡張である：

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/（参照するには、コンソールを見てくださいログメッセージ）

ビューは、controllerを意味するジョブの一部であるため、これは完全にEmber-esqueではありません。理想的には、clickイベントはRoleCheckboxController上の関数を呼び出し、Userオブジェクトを変更します。