如何在 ember.js 中的组件中获取商店 [英] how to get the store in a component in ember.js

问题描述

我到底如何获得组件内部存储的句柄?我正在尝试创建一个从商店返回结果的自动完成组件.

How in the world do i get a handle on the store inside of a component? I'm trying to create an auto-complete component that returns results from the store.

App.AutoCompleteComponent = Ember.Component.extend({

    //-------------------------------------------
    // Ember Properites
    //-------------------------------------------
    content: Ember.ArrayController.create(),

    //-------------------------------------------
    // Instance Properties
    //-------------------------------------------
    queryText: "",

    componentItemSelected: null,

    //-------------------------------------------
    // Observers
    //-------------------------------------------
    queryTextChanged: function () {
        this.updateContent(this.get("queryText"));
    }.observes("queryText"),

    //-------------------------------------------
    // Instance Methods
    //-------------------------------------------
    selectItem: function (item) {
        this.set("componentItemSelected", item);
    },

    updateContent: function (queryText) {

        if (queryText.length <= 5) {

            console.log('not greater than 5 chars');
            return;
        }

        this.get("content").setObjects([]);

        var items = App.Company.find();

        this.get("content").setObjects(items);
    }
});

这是我公司的模型

App.Company = DS.Model.extend({

  name: DS.attr('string'),

  created_at: DS.attr('date'),

  updated_at: DS.attr('date'),

  people: DS.hasMany('person')

});

我试过了:

• this.get('store')
• DS.Store.find('company')
• 只是store
• App.Company.find()

我总是得到一个 Uncaught TypeError ... has no method 'find'

推荐答案

真正的答案是您不应该这样做.一个组件应该与外部世界无关，并且添加对 store 的依赖打破了这个概念.实际上，您应该事先获取模型(在路由或控制器中，具体取决于逻辑)并将它们传递到组件中.

The real answer is you shouldn't. A component should be agnostic of the outside world, and adding a dependency on the store breaks that concept. Really you should get the models beforehand (in the route, or controller, depending on the logic) and passing them into the component.

https://github.com/emberjs/data/blob/master/TRANSITION.md

一般来说，直接在组件中查找模型是一种反模式，您应该更愿意在包含该组件的模板中传入您需要的任何模型.

In general, looking up models directly in a component is an anti-pattern, and you should prefer to pass in any model you need in the template that included the component.

既然我已经说过了，只需将 store 传递到组件中即可.它存在于路由和控制器上，所以当你创建一个组件作为参数之一在 store 中发送时，你可以使用 this.get('store')

Now that I've said that, just pass the store into the component. It lives on the routes and controllers, so when you create a component send in the store as one of the arguments, then you can access it using this.get('store')

{{auto-complete store=controller.store}}

或

{{auto-complete store=store}}

http://emberjs.jsbin.com/OxIDiVU/720/edit

这篇关于如何在 ember.js 中的组件中获取商店的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！