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

​

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

第二种数据结构更典型，对我来说根本不起作用。

有什么想法吗？

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 回答