在Component中加载模型

Question

我创建了一个组件,它生成一个下拉列表,用于根据传入的类型从可能的项目列表中选择项目:

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

我不想在页面加载时加载项目,因为它们可能有很多,很多时候它们不需要加载.我更愿意在用户与组件的交互中加载它们.那个nixes在路线中加载它们.

由于组件无法访问商店,我一直在尝试传入项目的控制器:

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

在组件中的某些位置,您将触发操作以加载项目,作为您提到的用户交互的一部分.