Question

我正在构建一个使用相当多组件的Ember应用程序。我也使用Bootstrap。我有一个带有标签的布局，并且在第二个标签内（默认隐藏），该组件（包含与主模型有hasMany关系的模型列表）赢得了＃39 ; t渲染。

我认为在渲染视图后我将此跟踪到Ember Data解析，因为如果我点击列表的另一个模型，这些关系就会显示出来。

一些信息和细节：

我有两个主要模型：

图像
作物

图像可以有很多作物。

我有一个具有此功能的图像/索引控制器：

loadCrops: function() {
  var self = this;
  this.get('selectedImage').get('crops').then(function(crops) {
    self.set('selectedImageCrops', crops);
  });
}.on('model.isFulfilled')

我添加了这个方法，因为我试图手动解决关系并获取变量中加载的图像的作物，但我没有运气。我传递的变量如下：

{{image-crops image=selectedImage crops=selectedImageCrops}}

这是我的索引路线：

export default Ember.Route.extend({
  model: function () {
    return this.store.find('image');
  },
  setupController: function(controller, model, request) {
    controller.set('model', model);
  }
});

如果有人需要更多细节，请询问他们。谢谢大家！

Answer 1

当您使用function() {}.on()时，您告诉Ember在事件发生时执行该功能。 model.isFulfilled loadCrops: function() { if(!this.get('model.isFulfilled')) { return; } var self = this; this.get('selectedImage').get('crops').then(function(crops) { self.set('selectedImageCrops', crops); }); }.observes('model.isFulfilled')不是一个事件，而是a property所以你需要观察它，并在方法中快速检查它确实已经满了（所以它不会触发，如果承诺重新启动，例如）

this

另外作为旁注，我建议您使用ES6箭头功能（保留外部var self = this）而不是使用loadCrops: function() { if(!this.get('model.isFulfilled')) { return; } this.get('selectedImage').get('crops').then((crops) => { this.set('selectedImageCrops', crops); }); }.observes('model.isFulfilled')，这样可以使代码更好一些。

ng-cloak

Answer 2

尝试更改为计算属性：

selectedImageCrops: function() {
  return this.get('selectedImage.crops');
}.property('selectedImage')

Answer 3

我最后做的是移动代码将庄稼加载到路径的model，并返回带有图像和裁剪的Ember.RSVP.hash，然后将其分配给控制器：

export default Ember.Route.extend({
  /**
   * Returns an Image instances array
   *
   * @method model
   * @return {Ember.RSVP.hash} Images & Crops
   */
  model: function () {
    return Ember.RSVP.hash({
      images: this.store.find('image'),
      crops: this.store.find('crop')
    });
  },
  /**
   * Takes care of setting the needed variables in the controller
   *
   * @method setupController
   */
  setupController: function(controller, model, request) {
    controller.set('model', model.images);
    controller.set('crops', model.crops);
  }
});

然后我在控制器中添加了一个辅助函数来获取当前图像的作物：

selectedImageCrops: function() {
  return this.get('crops').filter((obj) => {
    return obj.image === this.get('selectedImage');
  })[0];
}.property("selectedImage")

感谢@ Karl-JohanSjögren关于箭头功能的提示！

Ember不首先渲染组件

3 个答案: