5

次の2つのモデルがあります。

App.Child = DS.Model.extend({
    name: DS.attr('string')
});

と：

App.Activity = DS.Model.extend({
    children: DS.hasMany('child',{async:true}),
    name: DS.attr('string')
});

hasManyリレーションのために、チェックボックスを使用して既存の子から選択したいと考えています。

たとえば、次の 3 人の子供がいます。

App.Child.FIXTURES = [
  { id: 1, name: 'Brian' },
  { id: 2, name: 'Michael' },
  { id: 3, name: 'James' }
];

ユーザーは、アクティビティの作成または編集中にチェックボックスを使用して、 hasManyリレーションに追加する子を選択できる必要があります。

私の質問を説明するために JSFiddle を作成しました: http://jsfiddle.net/Dd6Wh/。「Create a new activity」をクリックして、何をしようとしているのかを確認してください。

基本的にはEmber.Select [ ... ] multiple="true"と同じですが、チェックボックス用です。

Ember.js を使用したこのようなものに対する正しいアプローチは何ですか?

4

1 に答える 1

14

ビューヘルパーで を使用してitemController、選択を管理できます。each以下のコードでは、次のコードを作成しましたChildController。

App.ChildController = Ember.ObjectController.extend({    
    selected: function() {
        var activity = this.get('content');
        var children = this.get('parentController.children');
        return children.contains(activity);
    }.property(),
    selectedChanged: function() {
        var activity = this.get('content');
        var children = this.get('parentController.children');
        if (this.get('selected')) {                                    
            children.pushObject(activity);            
        } else {                                    
            children.removeObject(activity);                                                    
        }        
    }.observes('selected')
});

itemController を使用すると、モデルに直接追加せずに、いくつかのプロパティとロジックを公開できます。その場合、selected計算されたプロパティとselectedChangedオブザーバー。

テンプレートでは、 を使用して選択範囲をバインドできますcheckedBinding="selected"。itemController は各モデルをプロキシするため、itemController のselectedプロパティが使用され、{{name}}バインディングがモデルの name プロパティを検索します。

<script type="text/x-handlebars" data-template-name="activities/new">
    <h1>Create a new activity</h1>

    {{#each childList itemController="child"}}
        <label>
            {{view Ember.Checkbox checkedBinding="selected"}}
            {{name}}
        </label><br />
    {{/each}}
    {{view Ember.TextField valueBinding="name"}}
    <button {{action create}}>Create</button>
</script>

編集テンプレートでの同じアプローチ:

<script type="text/x-handlebars" data-template-name="activities/edit">
    <h1>Edit an activity</h1>

    {{#each childList itemController="child"}}
        <label>
            {{view Ember.Checkbox checkedBinding="selected"}}
            {{name}}
        </label><br />
    {{/each}}
    {{view Ember.TextField valueBinding="name"}}
    <button {{action update}}>Update</button>
</script>

これは、この作業http://jsfiddle.net/marciojunior/8EjRk/のフィドルです。

コンポーネントのバージョン

テンプレート

<script type="text/x-handlebars" data-template-name="components/checkbox-select">
    {{#each elements itemController="checkboxItem"}}
        <label>            
            {{view Ember.Checkbox checkedBinding="selected"}}
            {{label}}
        </label><br />
    {{/each}}    
</script>

Javascript

App.CheckboxSelectComponent = Ember.Component.extend({   
    /* The property to be used as label */
    labelPath: null,
    /* The model */
    model: null,
    /* The has many property from the model */
    propertyPath: null,
    /* All possible elements, to be selected */
    elements: null,
    elementsOfProperty: function() {
        return this.get('model.' + this.get('propertyPath'));
    }.property()
});

App.CheckboxItemController = Ember.ObjectController.extend({    
    selected: function() {        
        var activity = this.get('content');
        var children = this.get('parentController.elementsOfProperty');        
        return children.contains(activity);
    }.property(),
    label: function() {    
        return this.get('model.' + this.get('parentController.labelPath'));
    }.property(),
    selectedChanged: function() {
        var activity = this.get('content');
        var children = this.get('parentController.elementsOfProperty');
        if (this.get('selected')) {                                    
            children.pushObject(activity);            
        } else {                                    
            children.removeObject(activity);                                                    
        }        
    }.observes('selected')
});

更新されたフィドルhttp://jsfiddle.net/mgLr8/14/

役立つことを願っています

于 2013-10-27T15:44:40.523 に答える