从视图访问模型关联

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

我有一个控制器和视图设置,控制器的模型属性设置为有效用户.

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

以下代码和输出显示在执行代码时尚未加载belongsTo关联.从视图类访问工作区(通过用户)的正确方法是什么？

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}}访问模板中的工作区 - 如何在视图类中执行相同的操作？

Answer 1

从视图类访问工作区(通过用户)的正确方法是什么？

您的方法this.get('controller.model.workspace')是从视图访问工作区的正确方法.但是,正如您的示例所示,didInsertElement()挂钩是错误的做法.由于App.User.find(1)是异步的,因此在呈现模板时,您无法依赖model.workspace(甚至model自身).这就是你的console.log第一次返回null的原因.

这可能并不明显,因为Ember非常努力地消除显式异步行为.由于它立即返回模型引用,我们可能期望App.User.find()同步,但事实并非如此.查看管理异步,仔细查看详细信息.

我可以通过{{model.workspace}}访问模板中的工作区 - 如何在视图类中执行相同的操作？

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

App.TestView = Ember.View.extend({

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

});

另见Bindings.观察者,计算属性:我什么时候使用？