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

问题描述

在世界上如何在组件中的商店内获得一个句柄？我正在尝试创建一个从商店返回结果的自动完成组件。

  App.AutoCompleteComponent = Ember.Component.extend（{
 
 // ----- -------------------------------------- 
 // Ember Properites 
 // ------------------------------------------- 
内容：Ember.ArrayController.create（），
 
 // ------------------------------- ------------ 
 //实例属性
 // ------------------------ ------------------- 
 queryText：，
 
 componentItemSelected：null，
 
 // ------------------------------------------- 
 //观察员
 // ------------------------------------------- 
 queryTextChanged：function（）{
 this.updateContent（this.get（queryText））; 
} .observes（queryText），
 
 // ------------------------------------------- 
 //实例方法
 // ------------------------------------------- 
 selectItem：function（item）{
 this.set（componentItemSelected，item）; 
}，
 
 updateContent：function（queryText）{
 
 if（queryText.length< = 5）{
 
 console.log （不超过5个字符）; 
 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'）




• 只是商店


• App.Company.find（）

我总是得到一个未捕获TypeError ...没有方法'find'

解决方案

真正的答案是你应该T。组件应该与外部世界不可知，并且增加对商店的依赖打破了这个概念。真的你应该事先获得模型（在路由或控制器中，取决于逻辑）并将它们传递到组件中。

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

通常，直接在组件中查找模型是一种反模式，您应该更喜欢在包含组件的模板中传递所需的任何模型。 p>

现在我已经说过，只是将商店传递到组件中。它存在于路由和控制器上，因此当您创建一个组件作为参数之一发送到商店时，您可以使用 this.get（'store'）

  {{auto-complete store = controller.store}} 
  pre> 
 
 
或
  {{auto-complete store = store} } 
  
  http://emberjs.jsbin.com/OxIDiVU/720/edit  
 
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);
    }
});
here is my company model 
App.Company = DS.Model.extend({

  name: DS.attr('string'),

  created_at: DS.attr('date'),

  updated_at: DS.attr('date'),

  people: DS.hasMany('person')

});
I've tried:


this.get('store') 
DS.Store.find('company') 
just store
App.Company.find()


I always get an Uncaught TypeError ... has no method 'find'
解决方案
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.
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}}
or
{{auto-complete store=store}}
http://emberjs.jsbin.com/OxIDiVU/720/edit

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