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 以降、初期化子を使用してストアをコンポーネントに注入できます。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

Inストアは、アプリの起動時にやのcomponentように自動的に挿入されることはありません。これは、コンポーネントがより分離されていると考えられるためです。routecontroller

以下に続くものは、ベスト プラクティスとは見なされません。コンポーネントは、渡されたデータを使用する必要があり、その環境については認識していません。このケースを処理する最善の方法は、 を使用sendActionしてやりたいことをバブルアップしstore、コントローラー自体で を使用してアクションを処理することです。

@ sly7_7 の提案は良いものです。ストアにアクセスする必要がある場所から多くのコンポーネントがある場合は、それを行うのに良い方法かもしれません.

あなたに到達するための別のアプローチstoreは、storeあなたのcomponent周囲controllerを参照することです。この場合、これがどれであるかは問題ではありcontrollerませcontrollerんstore。したがって、あなたに到達するには、周囲のを取得してから を取得するstoreことによって行うことができます。componenttargetObjectcontrollercomponentstore

例：

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

実際の例については、こちらを参照してください。

それが役に立てば幸い。

ネストされたコンポーネントを持つコメントに応じて更新します

たとえば、子コンポーネントが 1 レベルしかネストされていない場合でも、次を使用して親の 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 より前 - コントローラの方法

コントローラからストアをプロパティとして渡すことができます:

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 に答える
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 に答える