在组件中加载模型

Question

我制作了一个组件，它生成一个下拉列表，用于 select 根据传入的类型从可能的项目列表中选择一个项目：

{{item-selector type="type1"}}

我不想在页面加载时加载这些项目，因为它们可能有很多，而且很多时候不需要加载。我更喜欢在用户与组件交互时加载它们。这排除了在路线中加载它们的可能性。

由于组件无法访问商店，我一直在尝试为项目传递控制器：

{{item-selector type="type1" widget=controllers.type1}}

我正在使用 widget 因为我想不出更好的属性名称并且控制器已被占用。欢迎提出建议。

但现在我不确定如何在控制器中加载模型。我应该在 init 中完成吗？或者也许是一个计算属性？我不确定。

将不胜感激有关如何解决此问题的建议。

Answer 1

感谢双向数据绑定，您可以只传递一个空数组，它只会在需要时填充。

{{item-selector type="type1" items=items action="loadItems"}}

这里我们将项目作为列表的元素传递，列表的开头是空的。我们还传递了一个动作，要求路由按需加载项目。

// controller.js

export default Ember.ArrayController.extend({
  items: null
});

// route.js

export default Ember.Route.extend({
  actions: {
    loadItems: function() {
      var controller = this.get('controller');

      this.store.find('item').then(items => {
        controller.set('items', items);
      });
    }
  }
});

在您的组件中的某些地方，您将触发加载项目的操作，作为您提到的用户交互的一部分。

在组件中加载模型

Loading models in Component

ember.js

ember-data