Ember.js 组件中的加载模型

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

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

我不想加载页面加载上的项目，因为它们可能有很多，很多时候它们不需要加载。我更喜欢在用户与组件交互时加载它们。这就阻止了在路线上装载它们

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

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

我正在使用

小部件

，因为我想不出更好的属性名，控制器已经被使用了。欢迎提出建议

但现在我不确定如何在控制器中加载模型。我应该在

init

中执行吗？或者可能是计算属性？我不确定

---

对于如何解决此问题的建议，我们将不胜感激。

由于双向数据绑定，您只需传递一个空数组，它将仅在需要时填充

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

---

在组件中的某些位置，您将启动操作以加载项目，作为您提到的用户交互的一部分。

由于双向数据绑定，您只需传递一个空数组，该数组将仅在需要时填充

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

---

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

是不是

items=>

ES6？我在Coffeescript中看到过，但在JS中没有看到。@KalmanHazins yes ES6，最新的

ember cli

附带的是

items=>

ES6？我在Coffeescript中看到过，但在JS中没有看到。@KalmanHazins yes ES6，最新的

ember cli

随附