1

データの値 (通常は実行時に取得される) をフォーム要素にバインドする必要があるシナリオがあります。この場合、要素は任意の長さのデータ セットに対して繰り返しレンダリングされる Ember.Select です。

jsFiddle はここにあります簡単な例

<script type="text/x-handlebars">
{{#each App.simpleSelectionArray.content}}
{{this.firstName}}
  {{view Ember.Select
         contentBinding="App.peopleController.content"
         selectionBinding="this"
         optionLabelPath="content.fullName"
         optionValuePath="content.id"}}

  <p>Selected: {{this.fullName}}
    (ID: {{this.id}})</p>
{{/each}}

{{#each App.selectionArray.content}}
{{this.person.firstName}}
  {{view Ember.Select
         contentBinding="App.peopleController.content"
         selectionBinding="this.person"
         optionLabelPath="content.fullName"
         optionValuePath="content.id"}}

  <p>Selected: {{this.person.fullName}}
    (ID: {{this.person.id}})</p>
{{/each}}
</script>

</p> 

window.App = Ember.Application.create();

App.Person = Ember.Object.extend({
    id: null,
    firstName: null,
    lastName: null,

    fullName: function() {
        return this.get('firstName') + " " + this.get('lastName');
    }.property('firstName', 'lastName').cacheable()
});


App.peopleController = Ember.ArrayController.create({
    content: [
        App.Person.create({id: 1,firstName: 'Yehuda',lastName: 'Katz'}),
        App.Person.create({id: 2,firstName: 'Tom',lastName: 'Dale'}),
        App.Person.create({id: 3,firstName: 'Peter',lastName: 'Wagenet'}),
        App.Person.create({id: 4,firstName: 'Erik',lastName: 'Bryn'})
    ]
});

App.simpleSelectionArray = Ember.ArrayController.create({
    content: [
         App.peopleController.objectAt(1)
    ]});

App.selectionArray = Ember.ArrayController.create({
    content: [
         {
            id: '2',
            person: Ember.computed(function(key, value) {
                if (arguments.length === 1){
                    var personId = this.get('id');
                    console.log(personId);
                    var listedPerson = App.peopleController.content.findProperty("id", personId);
                    return listedPerson ;
                 }else{
                     this.set(key,value);
                     return value;
                 }
            }).property('id').cacheable() 
        },                     
    ]});

​

生成された 2 つの select 要素は、異なるデータ構造に基づいています。最初の (ほとんど) は、バインディング ポストの選択を除いて、期待どおりに動作します。

より典型的な2番目のデータ構造は、私にとってはまったく機能していません。

何かご意見は？

4

1 に答える 1

0

いくつかの構文の問題があり、バインドされたアイテムのセッターを提供する必要がありました。動作するバージョンはここにあります

html

<script type="text/x-handlebars">
    {{#each App.selectedPersonController.content}}
    {{this.personId}}
      {{view Ember.Select
             contentBinding="App.peopleController.content"
             selectionBinding="person"
             optionLabelPath="content.fullName"
             optionValuePath="content.id"}}

      <p>Selected: {{person.fullName}}
        (ID: {{person.id}})</p>

    {{/each}}
</script>​

脚本

window.App = Ember.Application.create();

Ember.ArrayProxy.reopen({
    /**
     * returns either an item or index for the current array based on a
     * requested field name and value
     *
     * @param fieldName
     * @param value
     * @param type
     */
    getItemFromField: function(fieldName, value, isIndex){
        var index = -1, aData = this.toArray();

        for(var i= 0, max=aData.length; i<max ; i++){
            var item = aData[i];
            if(item.hasOwnProperty(fieldName) && item[fieldName].toString() === value.toString()){
                if(isIndex){
                    return i;
                }
                return this.objectAt(i);
            }
        }

        if(isIndex){
            return -1;
        }
        return null;
    }
});

App.Person = Ember.Object.extend({
    id: null,
    firstName: null,
    lastName: null,

    fullName: function() {
        return this.get('firstName') + " " + this.get('lastName');
    }.property('firstName', 'lastName').cacheable()
});

App.selectedPersonController = Ember.ArrayProxy.create({
    content:[Ember.Object.create({
        personId: 2,

        person: function(item, value) {
            if(arguments.length === 1){
                var personId = this.get('personId');
                person = App.peopleController.getItemFromField("id", personId);
                return person;
            }else{
                return value;
            }
        }.property('personId').cacheable()
    })]
    });


App.peopleController = Ember.ArrayController.create({
    content: [
        App.Person.create({
        id: 1,
        firstName: 'Yehuda',
        lastName: 'Katz'
    }),
        App.Person.create({
        id: 2,
        firstName: 'Tom',
        lastName: 'Dale'
    }),
        App.Person.create({
        id: 3,
        firstName: 'Peter',
        lastName: 'Wagenet'
    }),
        App.Person.create({
        id: 4,
        firstName: 'Erik',
        lastName: 'Bryn'
    })
        ]
});​

私の基本的な関心事は、固定パスを持つがネストによって生成されるグローバル変数にバインドされていないコンテキストにバインドすることでした。

于 2012-06-26T21:27:35.673 に答える