在Ember.js中通过ajax加载选择选项的最佳做法是什么?

时间:2014-12-01 15:04:06

标签: javascript jquery ajax ember.js

我有一个包含这样的选择元素的表单:

<table>
    <tbody>
    <tr>
        <th>Keyword</th>
        <td>{{input type="text" value=job.keyword}}</td>
    </tr>
    <tr>
        <th>Color</th>
        <td>{{view "select" content=colors optionLabelPath="content.name" optionValuePath="content._id"
            value=job.colorID}}</td>
    </tr>
    </tbody>
</table>

目前,我在Route中使用模型钩子通过ajax promise

加载colors
App.JobDetailRoute = Ember.Route.extend({
    model: function(params){
        return Ember.RSVP.hash({
                    job: Ember.$.getJSON("/service/job/" + params.jobId),
                    colors: Ember.$.getJSON("/service/color/")
                });
    }
});

但是,我认为colors不应该是模型的一部分 - 它应该属于控制器或视图。 是否有任何实践可以在控制器或视图中优雅地加载数据而不是模型钩子?

任何帮助都将受到赞赏。

感谢。

1 个答案:

答案 0 :(得分:1)

您不应该在Ember控制器或视图中加载数据外部数据,路由是这样做的地方。你基本上有两个选择:

  • 使用模型钩子(为什么你没有为作业和颜色创建模型?)
  • 使用setupController方法,如下所示:

    setupController: function(controller) {
      this._super.apply(this, arguments);
    
      this.store.findAll('color').then(function(colors) {
        this.set('colors', colors);
      }.bind(controller));
    },
    

第二个选项的缺点是Ember在转换到此页面之前不会等待颜色加载。