8

文字列の配列 (サーバー上の列挙型を表す) を含むオブジェクト属性をチェックボックスのリストにバインドするソリューションを探しています。バインディングは双方向である必要があります。

サーバーには、「ADMIN」、「GUEST」、「USER」という値を持つ Role など、いくつかの列挙定義があります。ユーザー オブジェクトはこのような役割をいくつか持つことができるため、Ember のユーザー オブジェクトは次の形式になります。

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

ユーザー管理には、チェックボックスのグループが必要です。役割ごとに 1 つのチェックボックス。そのため、なし、すべて、または複数を選択することができます。

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

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

  • 誰かがこれに対する良い解決策を持っていますか?
  • そのような拡張機能を ember に提供するオープンソース プロジェクトを知っている人はいますか?

前もって感謝します。// ph

4

1 に答える 1

8

Ember オブジェクトとチェックボックス間の双方向バインディングを処理する一般的な方法は、サーバーとクライアントの列挙型を手動で (AJAX または WebSocket を使用して) 同期する場合、プラグインを必要とせずにプレーンな Ember.js を使用して実装できます。 . Ember は、同期後に Checkbox を使用してオプションのリストを自動的に更新できることに注意してください。

したがって、今後は、Ember Array としてロールを持つ列挙型があると仮定します。

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.Checkboxcheckedclick

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. 理想的には、clickイベントは、オブジェクトRoleCheckboxControllerに変更を加える関数を呼び出します。User

于 2013-02-02T21:15:26.967 に答える