javascript - 制作两个连接的选择字段非常丑陋，我做错了什么？

Question

我正在从服务器端提取数据(ATM，我仍在使用 FixturesAdapter)，并希望创建两个连接的选择输入，以便用户选择其中一种提取的格式。每种格式都有一个所属的类别，因此第一个输入使用户选择一个类别，然后第二个选择输入更新为仅包含之前选择的类别中的格式。

我已经设法让它工作了，但是代码看起来真的很乱而且很难看，有没有办法改进它？

感谢任何帮助，谢谢!

格式模型

App.Format = DS.Model.extend({
    title: DS.attr('string'),
    category: DS.attr('string')
});

应用程序路由

App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        this.controllerFor('formats').set('model', this.store.find('format'));
    }
});

formats.hbs

<label class="control-label">Category:</label>
<div class="controls">
    {{view "select" content=categories value=selectedCategory}}
</div>
<label class="control-label">Format:</label>
<div class="controls">
    {{view "select" content=formats value=selectedFormat}}
</div>

FormatsController

App.FormatsController = Ember.ArrayController.extend({

    needs: 'index',

    categories: function() {
        return this.mapBy('category').uniq();
    }.property('@each.title'),

    observeCategories: function() {
        this.set('selectedCategory', this.get('categories.firstObject'));
    }.observes('categories'),

    observeSelectedCategory: function() {
        this.set('formats', this.filterBy('category', this.get('selectedCategory')).mapBy('title'));
    }.observes('selectedCategory'),

    observeFormats: function() {
        this.set('selectedFormat', this.get('formats.firstObject'));
    }.observes('formats'),

    observeSelectedFormat: function() {
        var format = this.findBy('title', this.get('selectedFormat'));
        this.get('controllers.index').set('format', format);
    }.observes('selectedFormat')

});

Answer 1

TL;DR - Working JS Bin Example

您在这里做错了几件事:

1. 您的ApplicationRoute.setupController方法用于设置另一个 Controller 的模型。 setupController用于设置路线的 Controller 。此外，当您覆盖setupController时最好你打电话this._super(controller, model) ，所以 ember 将设置 model如controller的模型。
2. 因此，您需要实现 App.FormatsRoute它将实现model方法，这是你应该返回 this.store.find('format') 的地方。无需覆盖App.FormatsRoute.setupController方法。
3. formats应该是一个计算属性，取决于 categories

4. {{view "select" content=formats value=selectedFormat}}

   应该是:

   {{view "select" content=formats optionLabelPath='content.title' optionValuePath='content.id' selection=selectedFormat}}

   formats应该是 format 的数组楷模。这样selectedFormat将使用格式模型填充，无需您自己计算。