2

I have a simple part of my Ember application that's supposed to draw a list of books. The issue is that if the user visits the list before the books are loaded from the server, the list will be empty. Even after the data finishes loading, the list will still be empty.

What methods does Ember have to to refresh the view after data is loaded? And where would be the appropriate place to put this code? Here's what my code looks like:

Route:

App.MyRoute = Ember.Route.extend({
  model: function() {
    return App.store.find(App.Book); // get books from the server
  }
});

Template:

{{#each book in model}}
  <li {{ bindAttr data-book-id="book.id" }}>
    <span>{{ book.name }}</span>
  </li>
{{/each}}

For the record, I would like to do something like this:

{{#if model.get('isLoaded')}}
  {{#each book in model}}
    <li {{ bindAttr data-book-id="book.id" }}>
      <span>{{ book.name }}</span>
    </li>
  {{/each}}
{{else}}
   <span>Loading books...</span>
{{/#if}}
NudeCanalTroll
  • 2,266
  • 2
  • 19
  • 43
  • the `{{each}}` helper also has an `{{else}}` which is where you'd add a spinner for your list, almost the same way you'd do for an individual item. As for populating your list view, you shouldn't have to manually call any method as the framework is responsible for populating the records in the `ModelArray` it gave you. If it can't populate the data even when it receive JSON from your backend API, then the problem must be in your store/adapter/serializer or the JSON format. What is your sever sending you? how did you configure your store? – MilkyWayJoe Feb 13 '13 at 21:11
  • Ah, that's it. In my route's `model` function I'm actually converting the `ModelArray` to a normal JavaScript array and using that as the model (although I didn't show that in my code above). That's why Ember isn't auto-updating. If you post an official answer, I'll accept it. Thanks! – NudeCanalTroll Feb 13 '13 at 21:19
  • Added an answer from the comment – MilkyWayJoe Feb 13 '13 at 21:24

1 Answers1

1

As stated in my comment above, the {{each}} helper also has an {{else}} which is where you'd add a spinner for your list, almost the same way you'd do for an individual item. As for populating your list view, you shouldn't have to manually call any method as the framework is responsible for populating the records in the ModelArray it gave you. If it can't populate the data even when it receive JSON from your backend API, then the problem must be in your store/adapter/serializer or the JSON format. One should check what sever sending as response and how the store is set up (adapter/serializer/etc) in order to properly translate the JSON response into what Ember-Data expects as valid data for the app models.

MilkyWayJoe
  • 9,082
  • 2
  • 38
  • 53
  • Thanks! As a follow-up, since Ember only detects changes on objects of a certain type (e.g. `RecordArray`), how can I modify those objects in such a way that Ember will still detect changes? For example, let's say I only wanted to show books whose names start with "A". If I use the `filter` function, it seems to convert the `RecordArray` to a normal JavaScript Array... – NudeCanalTroll Feb 13 '13 at 21:30
  • can you update your questions with more details, and if possible create a sample in [jsfiddle.net](http://jsfiddle.net) with what you're doing/trying-to-do? – MilkyWayJoe Feb 13 '13 at 21:32
  • Hmm, I thought about it for a bit and I think the correct answer is that my routes should simply set the `RecordArray` as the model, and then modifications to that model should be made in the controller. – NudeCanalTroll Feb 13 '13 at 21:40
  • I'd change that to simply `App.Book.find()`, removing the `App.store.find` stuff – MilkyWayJoe Feb 13 '13 at 21:50
  • 1
    Okay, I changed that. I added a function to the route's controller that takes `this.get('content')` and modifies it return the list of books with the ones I don't want to see filtered out. That still didn't work. The key was to set `.property('content.@each')` on the function. Now the list in the template automatically redraws itself when the data finishes loading and new records are added/removed. – NudeCanalTroll Feb 13 '13 at 23:25