How to get a store in a component in ember.js

Question

How in the world can I get a handle to the repository inside a component? I am trying to create an autocomplete component that returns results from the repository.

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 tried:

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

I always get Uncaught TypeError ... has no method 'find'

Answer 1

The real answer is not worth it. The component must be agnostic to the outside world, and adding a store dependency violates this concept. Indeed, you must get the models in advance (in the route or controller, depending on the logic) and pass them to the component.

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

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

Now that I have said this, just pass the store to the component. It lives on routes and controllers, so when you create a component, send it to the store as one of the arguments, 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