从组件访问存储

Question

我有一个组件，当用户单击组件时，它会添加一些值来存储，我尝试使用这种方式，但出现错误：

OlapApp.MeasureListItemComponent = Ember.Component.extend({
  tagName: 'li',
  isDisabled: false,
  attributeBindings: ['isDisabled:disabled'],
  classBindings: ['isDisabled:MeasureListItemDisabled'],

  actions: {
    add: function(measure) {
      var store = this.get('store');
      store.push('OlapApp.AxisModel', {
            uniqueName: measure.uniqueName,
            name: measure.name,
            hierarchyUniqueName: measure.hierarchyUniqueName,
            type: 'row',
            isMeasure: true,
            orderId: 1
      });
    }
  }
});

这是错误：

Uncaught TypeError: Cannot call method 'push' of undefined  MeasureListItemComponent.js:18

是否可以将记录从组件推送到存储？为什么我无法访问商店？ 我的模型名称是“AxisModel”，应用程序命名空间是“OlapApp”

Answer 1

自 Ember 2.1.0 起

export default Ember.Component.extend({
  store: Ember.inject.service('store'),
});

Ember 2.1.0 之前 - 依赖注入方式

App.MyComponent = Ember.Component.extend({

  store: Ember.computed(function() {
     return this.get('container').lookup('store:main');
  })

});

在 Ember 2.1.0 之前 - 控制器方式

您可以将 store 作为属性从控制器传递：

App.MyComponent = Ember.Component.extend({

  value: null,
  store: null,
  tagName: "input",

  didInsertElement: function () {

     if (!this.get('store')) {
        throw 'MyComponent requires store for autocomplete feature. Inject as store=store'
     }
  }

});

商店在每个控制器上都可用。所以在父视图中你可以包含如下组件：

{{view App.MyComponent
    store=store
    class="some-class"
    elementId="some-id"
    valueBinding="someValue"
}}

将属性传递给组件已记录在案 here

Answer 2

可以借助依赖注入来注入 store。

示例

import Ember from 'ember';

export default Ember.Component.extend({

  /**
   *
   */
  store: Ember.inject.service(),

  /**
   * Initialize the component.
   */
  init() {
    this.initialize();

    this._super();
  },

  /**
   * Initialize the properties and prerequisites.
   */
  initialize() {
    // Set the component properties
    this.todos().then((data) => {
      this.set('todoEntries', data);
    });
  },

  /**
   * Returns the todo entries.
   *
   * @returns {*|Promise|Promise.<T>}
   */
  todos() {
    const store = this.get('store');

    return store.findAll('todo');
  },

});

Answer 3

从 Ember v1.10 开始，可以使用初始化器将 store 注入到组件中，参见：http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_injected-properties:

export default Ember.Component.extend({
    store: Ember.inject.service()
});

Answer 4

在component 中，应用程序启动时，商店不会像route 或controller 中那样自动注入。这是因为组件被认为更加孤立。

以下内容不被视为最佳做法。组件应该使用传递给它的数据而不知道它的环境。处理这种情况的最佳方法是使用sendAction 冒泡您想要执行的操作，并在控制器本身中使用store 处理操作。

@sly7_7 建议是一个很好的建议，如果您有很多组件需要访问商店，那么这可能是一个好方法。

获取store 的另一种方法是获取store 你的component 周围的controller 引用。在这种情况下，哪个controller 无关紧要，因为每个controller 都已经引用了注入其中的store。因此，现在可以通过获取component 的targetObject 来获取您的store，这将是围绕component 的controller，然后获取store。

示例：

OlapApp.MeasureListItemComponent = Ember.Component.extend({
  ...
  actions: {
    add: function(measure) {
      var store = this.get('targetObject.store');
      ...
    }
  }
});

有关工作示例，请参阅 here。

希望对你有帮助。

更新以响应您具有嵌套组件的评论

例如，如果您的子组件仅嵌套一层，那么您仍然可以使用 parentView 引用父组件的 targetObject：

App.ChildCompComponent = Ember.Component.extend({
  storeName: '',
  didInsertElement: function() {
    console.log(this.get('parentView.targetObject.store'));
    this.set('storeName', this.get('parentView.targetObject.store'));
  }
});

更新example。

Answer 5

当前 ember-cli 执行此操作的方法似乎是使用初始化程序。与@Sly7_7 的答案非常相似。

要获得基本模型，请使用：

  ember g initializer component-store-injector

然后将其编辑为：

// app/initializers/component-store-injector.js

export function initialize(container, application) {
  application.inject('component', 'store', 'store:main');
}

export default {
  name: 'component-store-injector',
  initialize: initialize
};

我相信这会将商店添加到所有组件中。

盗自https://github.com/ember-cli/ember-cli-todos

Answer 6

我不知道组件是否打算以这种方式使用。但如果你愿意，我认为你可以声明一个初始化器并将 store 注入到所有组件中。

Ember.onLoad('OlaApp', function(OlaApp) {
  OlapApp.initializer({
    name: 'injectStoreIntoComponents',
    before: 'registerComponents',
    initialize: function(container, application){
      container.register('store:main', App.Store);
      container.injection('component', 'store', 'store:main');
    }
  })
});

这是一个人为但有效的示例：http://jsbin.com/AlIyUDo/6/edit

Answer 7

另一种还没有人提到的方法是简单地将 controller.store 传递给组件，例如

{{my-awesome-component store=controller.store}}