Question

我有一些场景需要将数据值（通常在运行时检索）绑定到表单元素。在这种情况下，元素是一个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>

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() 
        },                     
    ]});

两个生成的选择元素基于不同的数据结构。第一个（大部分）表现如预期，除了绑定帖子选择。

第二种数据结构更为典型，根本不适用于我。

有什么想法吗？

Answer 1

我遇到了一些语法问题，需要为绑定项提供一个setter。可以找到工作版本here

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'
    })
        ]
});

我的基本关注点是绑定到没有绑定到具有固定路径但通过嵌套生成的全局变量的上下文。

绑定到Ember。在atemplate循环中选择

1 个答案: