ember.js - 用 ember 选择下拉菜单

Question

我正在尝试生成一个选择输入并将所选对象传递给 View 上的更改事件。 ember 联系人示例使用 <ul>但通过选择， View 需要位于每个 View 之外，否则甚至不会触发更改。

这是 View js:

App.SelectView = Ember.View.extend({

    change: function(e) {
        //event for select
        var content = this.get('content');
        console.log(content);   

        App.selectedWidgetController.set('content', [content]);
    },
    click: function(e) {
        //event for ul
        var content = this.get('content');
        console.log(content);   

        App.selectedWidgetController.set('content', [content]);
    }
});

ul来自示例作品:

<ul>
    {{#each App.widgetController.content}}
        {{#view App.SelectView contentBinding="this"}}
            <li>{{content.name}}</li>
        {{/view}}
    {{/each}}
</ul>

但是如果我直接替换 html，则不会触发更改事件(这是有道理的)

<select>
    {{#each App.widgetController.content}}
        {{#view App.SelectView contentBinding="this"}}
            <option>{{content.name}}</option>
        {{/view}}
    {{/each}}
</select>

所以我猜想必须将选择包含在 View 中。在这种情况下，我如何传递相关对象？...此代码会导致整个数组被传递:

{{#view App.select_view contentBinding="App.widgetController.content"}}
    <select>
    {{#each App.widgetController.content}}
        <option>{{name}}</option>
    {{/each}}
    </select>
{{/view}}

Answer 1

Ember 现在有一个内置的选择 View 。

这是一个使用示例:

var 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.selectedPersonController = Ember.Object.create({
    person: null
});

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

您的模板如下所示:

{{view Ember.Select
       contentBinding="App.peopleController"
       selectionBinding="App.selectedPersonController.person"
       optionLabelPath="content.fullName"
       optionValuePath="content.id"}}

同样，这是一个 jsFiddle 示例:http://jsfiddle.net/ebryn/zgLCr/