javascript - Ember 一开始不渲染组件

Question

我正在构建一个 Ember 应用程序，它使用了相当多的组件。我也在使用 Bootstrap。我有一个带有选项卡的布局，在第二个选项卡(默认情况下隐藏)内，组件(其中包含与主模型具有 hasMany 关系的模型列表)将“t 渲染。

我认为我在渲染 View 后将其跟踪到 Ember 数据解析，因为如果我单击列表中的另一个模型，这些关系将会显示。

一些信息和细节:

我有两个主要模型:

• 图片
• 裁剪

一张图像可以有多种裁剪。

我有一个具有此功能的图像/索引 Controller :

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 不是一个事件，而是 a property因此您需要观察它并在方法中快速检查它是否确实已完成(因此如果重新启动 promise ，它就不会触发)

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

另外，作为旁注，我建议您使用 ES6 箭头函数(它保留外部 this)，而不是使用 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')