ember.js - 如何将通用选择 View 与具有 ID 的持久化对象一起使用

Question

我在这里找到了一个可重复使用的选择 View 的好解决方案: select dropdown with ember (@ebryn 的回答)

但是，我很难找到一种方法将它用于具有 id 属性的对象。我的意思是我希望能够使用选择 View 来管理持久对象上的关联。

我在这里 fork 了 js fiddle :http://jsfiddle.net/sohara/rgDQr/13/目前没有办法保留我的 thingController 的选择和 person 属性是在页面加载时设置的。有没有一种好的方法可以更改此设置，以便 select 仅管理 id 值，但仍显示例如 fullName 属性？

我想我可以在 thingController 中添加回调，它根据 person 对象的 id 值设置 personId，但这并不能解决持久性问题。然后每次页面加载都会重置 personId 属性。另外，如果这是我想要更改的属性，我认为直接从 View 中定位 personId 属性是有意义的吗？

谢谢，肖恩

Answer 1

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

您可以在此处的最新 Ember.js 构建中找到它:http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js

这是一个示例用法:

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/