在模板循环中绑定到 Ember.Select答案

【问题标题】：Binding to an Ember.Select within atemplate loop在模板循环中绑定到 Ember.Select
【发布时间】：2012-06-26 03:44:15
【问题描述】：

我有一个场景需要将数据的值（通常在运行时检索）绑定到表单元素。在这种情况下，元素是一个 Ember.Select，它将针对任意长度的数据集重复呈现。

jsFiddle 可以在这里找到simple example

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

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

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

有什么想法吗？

【问题讨论】：

嗯，我不确定我是否理解你的问题：你有一个要迭代的项目数组，并且在每次迭代中你想显示一个 <select/> 哪个选项是相同的对于每个项目，您可以从 select 中选择一个项目，然后将其存储在项目本身上？现在我不知道我是否把我的问题说清楚了。嗯..
在实际应用程序中，我的数据由一组规则组成，每个规则都包含可变数量的条件。条件是从相同的选择选项构建的：rule:{considtions:[]}
数据（希望从选择中绑定）然后可用于保存或其他操作。由于两个数组的长度都是可变的，因此我无法像大多数其他示例所示那样使用全局路径进行绑定。所以在这里我试图绑定到 {{#each}} 循环内的本地模板上下文 - 应该哪个？绑定到为其设置默认值的原始条件。
您能否提供您想要获得的 HTML 结构的代码示例？这准确吗：jsfiddle.net/pangratz666/XpPTz？

标签： ember.js model-binding handlebars.js

【解决方案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'
    })
        ]
});

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

【讨论】：