Ember.js Getting Started Guide--Query records

The store provides a unified interface to get data. Including creating new records, modifying records, deleting records, and more about the Store API, see this URL:http://devdocs.io/ember/data/classes/ds.store.

in order to demonstrate the use of these methods we combine firebase, about the integration of Firebase and Ember before the article has been introduced, not too much introduction.

To prepare for the job:

Ember G Route Articlesember G Route articles/article

1, Query methodFindAll,FindRecord,Peekall,Peekrecord

First Configure the route and modify the sub-route to add a dynamic segment article_id.

App/router.js//Other code is slightly written, router.map (function () {this.route (' store-example ');  This.route (' articles ', function () {This.route (' article ', {path: '/:article_id '}); });});

here is the route code, which calls the Store 's find method directly, returning all the data.

App/routes/articles.js import Ember from ' Ember '; Export Default Ember.Route.extend ({model:function () {///returns all article Retur in Firebase database       N This.store.findAll (' article '); }});

for the interface to look comfortable I introduced the bootstrap framework. Enter the way:Bower Install bootstrap. Then modify the ember-cli-build.js to introduce the bootstrap before return:

App.import ("Bower_components/bootstrap/dist/js/bootstrap.js"); App.import ("bower_components/bootstrap/dist/css/ Bootstrap.css ");

Restart the project for it to take effect.

The following is the template Articles.hbs that displays the data .

<!--  app/templates/articles.hbs  --> <div>        <div>               <div class= "Col-md-4 col-xs-4" >                      <ul>                      {{#each   Model as |item|}}                              <li>                                     <!--set up routing, The hierarchy of routes is consistent with those defined in the Router.js, and the id attribute of the model isFor parameters  -->                   {{#link-to  ' articles.article '  item.id}}                                            {{ item.title}}                                     {{/link-to}}                             </li>                      {{ /each}}    &nBsp;                </ul >              </div>                <div class= " Col-md-8 col-xs-8 ">               {{outlet}}              </div >       </div></div>

run in Browser:http://localhost:4200/articles/. Wait a moment to see the displayed data, waiting time is related to your speed. After all , Firebase is not at home!!! If the program code is not written correctly then you will see the result as follows:

But the right side is blank, click on any of the data below, you can see what is not displayed on the right!

The following code is added to the child template to display the data:

<!--App/templates/articles/article.hbs--
 
on the left side of the data, the right side can display the corresponding data! But how does this show up?? in fact , Ember automatically according to the dynamic section filter, of course you can also display the use of FindRecord method filtering. 
 
//  app/routes/articles/article.js  import ember from  ' Ember ';  export default ember.route.extend ({         model: function (params)  {               console.log (' params =  '  + params.article_id);               //  ' [email  Protected] '               return  This.store.findRecord (' article ',  params.article_id);        }}); 
 
The resulting result is consistent with not calling the FindRecord method. In order to verify that this method was executed, we changed the value of the dynamic segment params.article_id to a nonexistent value of ' Ubuntuvim ', which ensures that in my firebase  There is no data in the data that has an ID of this value. At this point the console appears with the following error message, which can be seen from the error message because the record does not exist. 
 
 
in the above example, we use the FindAll () method and the FindRecord () method , and two methods are similar to the two methods, namely Peekrecord () and Peekall () method. The difference between the two methods is that the request will not be sent, and they will only get the data in the local cache. 
 
 
         Articles.js article.js These two  Route Peekrecord ()  Peekall ()  method to test the effect. 
 
App/routes/articles.js import Ember from ' Ember '; Export Default Ember.Route.extend ({model:function () {///return all article/re in Firebase database                           Turn this.store.findAll (' article ');       Return This.store.peekAll (' article '); }});
 
I didn't store the data locally because I didn't send the request, so this call doesn't have any data. 
 
App/routes/articles/article.js import Ember from ' Ember '; Export Default Ember.Route.extend ({model:function (params) {//Return This.store.findRecord (' article               ', params.article_id);       Return This.store.peekRecord (' article ', params.article_id); }});
 
Because calling FindAll in the parent Route Gets the data and is already stored in the store , you can get the data using the Peekrecord () method. 
 
but in the model Introduction This article describes the characteristics of the store , when the interface to obtain data first in the store to query whether the data exists, if not present in the resend request to get, so feel The difference between Peekrecord () and FindRecord () method is not very big! 
 
 2, querying multiple recordsMethodQuery ()
A project often encounters a set of matching data that is queried against a value. The data returned at this time is not the only one, then Ember How to achieve it? 
 
  app/routes/articles.js import Ember from  ' Ember ';  export default  ember.route.extend ({       model: function ()  {               //   returns all article in the Firebase database               // return  This.store.findAll (' article ');                            // return  This.store.peekAll (' article ');                     //   querying the category for Java data using the Query method                return this.store.query (' article ',  {  filter: { category:  ' Java '  } }). Then (item)  {                      //   processing of matching data                        return item;              });        }});
 
Query the category for Java data. You can use the Queryrecord () method if you only want to make a precise query to a certain piece of data . as follows:
 
This.store.queryRecord (' article ', {filter: {id: '-jzyt-vlewdf6zy3cefo '}}). Then (function (item) {//Processing of matching data}) ;
 
 
to this, the commonly used methods introduced, hope that through the introduction of the above methods to play a starting effect, there is about Ds. There are many more ways to use the Store class, which are similar, and more ways to read the API documentation yourself . 
 

Ember.js Getting Started Guide--Query records