49

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

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”

4

7 回答 7

44

从 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()
});
于 2015-04-23T07:05:42.937 回答
43

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

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

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

另一种接近你的方法store可能是得到store你component周围controller的参考。在这种情况下，这无关紧要，controller因为每个controller都已经引用了store注入其中的内容。因此，现在要到达您的位置，可以store通过获取周围的component's然后获取.targetObjectcontrollercomponentstore

例子：

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

有关工作示例，请参见此处。

希望能帮助到你。

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

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

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

更新示例。

于 2013-09-04T17:28:04.300 回答
14

自 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"
}}

将属性传递给组件记录在此处

于 2013-10-31T09:31:25.790 回答
13

当前执行此操作的 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窃取

于 2015-04-22T22:30:53.000 回答
7

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

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

于 2013-09-04T12:15:11.860 回答
6

可以在依赖注入的帮助下注入存储。

例子

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');
  },

});
于 2016-05-23T16:25:19.247 回答
4

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

{{my-awesome-component store=controller.store}}
于 2014-11-03T07:47:00.690 回答