ember.js - 从 View 访问模型关联

Question

我的用户和工作区模型具有 belongsTo/hasMany 关系:

App.User = DS.Model.extend({
  name: DS.attr('string'),
  workspace: DS.belongsTo('App.Workspace')
});

App.Workspace = DS.Model.extend({
  name: DS.attr('string'),
  users: DS.hasMany('App.User')
});

我有一个 Controller 和 View 设置， Controller 的模型属性设置为有效用户。

App.ApplicationRoute = Ember.Route.extend({
  setupController: function() {
    this.controllerFor('test').set('model', App.User.find(1));
  }
});

下面的代码和输出表明，在代码执行时，belongsTo 关联尚未加载。从 View 类访问工作区(通过用户)的正确方法是什么？

App.TestView = Ember.View.extend({

  didInsertElement: function() {
    var self = this;

    console.log('first try: ');
    console.log(this.get('controller.model.workspace'));

    setTimeout(function() {
      console.log('second try: ');
      console.log(self.get('controller.model.workspace'));
    }, 1000);
  }
});

输出；

// first try: 
// null 
// second try: 
// Class { ... }

我可以通过 {{model.workspace}} 访问模板中的工作区——如何在 View 类中做同样的事情？

Answer 1

What is the proper way to access the workspace (through the user) from the view class?

你的方法 this.get('controller.model.workspace')是从您的 View 访问工作区的正确方法。但是正如您的示例所示， didInsertElement() 钩子(Hook)是错误的地方。由于 App.User.find(1)是异步的，你不能指望 model.workspace (或什至 model 本身)在渲染模板时可用。这就是你的 console.log 第一次返回 null 的原因。

这可能并不明显，因为 Ember 非常努力地消除显式形式的异步行为。由于它会立即返回模型引用，我们可能会期望 App.User.find()是同步的，但事实并非如此。看看 managing-asynchrony仔细查看细节。

I can access the workspace in the template via {{model.workspace}} — how do I do the same thing in the view class?

在幕后， Handlebars 正在绑定(bind) {{model.workspace}}到您的模型并在值更改时重新渲染模板。您应该在 View 类中使用类似的技术。根据您要完成的任务，您可能希望使用绑定(bind)、计算属性或观察者。例如:

App.TestView = Ember.View.extend({

  workspaceChanged: function() {
    console.log('workspaceChanged to: ');
    console.log(this.get('controller.model.workspace'));        
  }.observes('controller.model.workspace')

});

另见 Bindings. Observers, Computed Properties: What Do I Use When?