从组件访问存储 [英] Access store from component

问题描述

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

i have a component and when user click on component it add some value to store,i try to use this way but i get an error :

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'

is it posible to push record to store from component? why i cant access to store ? my model name is 'AxisModel' and application namespace is 'OlapApp'

推荐答案

在组件商店不会像路线或控制器中自动注入当您的应用程序启动时。这是因为组件被认为更加孤立。

In a component the store does not get injected automatically like in route's or controller's when your app starts. This is because components are thought to be more isolated.

下面的内容不被认为是最佳实践。组件应该使用传递给它的数据，不知道它的环境。处理这种情况的最好办法是使用 sendAction 来弹出你想要做的事情，并使用 store 在控制器本身。

What follows below is not considered a best practice. A component should use data passed into it and not know about it's environment. The best way to handle this case would be using sendAction to bubble up what you want to do, and handle the action with the store in the controller itself.

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

@sly7_7 suggestion is a good one, and if you have a lot of components from where you need access to the store then it might be a good way to do it.

另一种获取您的商店的方法可以获取存储您的组件围绕控制器参考。在这种情况下，无论哪个控制器这是因为每个控制器已经引用了 store 注入。所以现在要获得 store 可以通过获取组件的 targetObject 这将是控件围绕组件，然后获取

Another approach to get to your store could be to get the store your component surrounding controller has reference to. In this case it doesn't matter which controller this is because every controller has already a reference to the store injected into it. So now to get to your store could be done by getting the component's targetObject which will be the controller surrounding the component and then get the store.

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

请参阅这里为一个工作示例。

See here for a working example.

希望它有帮助。

如果例如你的子组件只嵌套一个级别，那么你仍然可以使用 parentView来引用父目标对象：

If for example you child component is only nested one level then you could still refer to parent's targetObject using parentView:

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

已更新示例。

这篇关于从组件访问存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！