Updating relationships or other data with find

Question

Edit: in general, how can I call find () and do something with each element in the result set

How to update elements of a given relationship without breaking the binding? For instance. hasMany somethings model, but only the first 10 are loaded initially, and then I want to replace them with the next 10, etc. for pagination

I can call and add to the base OrderedSet, but this breaks the bindings on my page and everything just disappears.

App.Category = DS.Model.extend({ name: DS.attr('string'), type: DS.attr("string"), parent: DS.belongsTo('App.Category'), children: DS.hasMany('App.Category'), stories: DS.hasMany('App.Story'), }); App.CategoryController = Ember.ObjectController.extend({ page: 1, loadPage: function() { console.log(this.get('stories')) var s = App.Story.find({sid: this.get('id'), count: 12, page: this.get('page')}) this.get('stories').clear() for (var i = 0, len = this.length; i < len; ++i) { this.get('stories').add(s[i]) } }, nextPage: function(event) { this.set('page', this.get('page') + 1) this.loadPage() }, prevPage: function(events) { this.set('page', this.get('page') - 1) this.loadPage() }, breadcrumb: function() { return "" }.property('parent'), sortProperties: ['created'], sortAscending: false, nextEnabled: function() { return true }.property('page'), prevEnabled: function() { if (this.get('page') > 1) { return true } return false }.property('page'), }); 

Answer 1

Typically, ORMs do not provide pagination of children in the parent. The usual way to deal with this is to break out of the object model and save the parent object and a separate collection of child objects available for the collection. In other words, you have to break the bindings and then manage them yourself for the purpose of this page.

Answer 2

Instead of being tied to one array, which is cleared and re-filled when changing pages, I suggest you do the following:

• Save the current page index in the page property of your controller (done)
• Save the required number of elements for the request in the count property of your controller (done)
• Create a computed pageContent property that depends on page and count . It should return a find() request with these parameters
• As a bonus, pageContent caches every request for performance

Your model and controller will look something like this:

 App.Post = DS.Model.extend({ title: DS.attr('string') }); App.IndexController = Ember.Controller.extend({ cache: [], counts: [5, 10, 20, 50], page: 0, count: 5, pageContent: function() { var page = this.get('page'); var count = this.get('count'); var key = this.keyFor(page, count); var cache = this.get('cache'); if (!cache[key]) { // we don't have this pair of index and count cached, // so retrieve data from the api and cache it cache[key] = App.Post.find({page: page, count: count}); } return cache[key]; }.property('page', 'count'), // generates hash key for page and count pair keyFor: function(page, count) { return page + '-' + count; }, // actions next: function() { this.incrementProperty('page'); }, previous: function() { if(this.get('page') > 0) { this.decrementProperty('page'); } } }); 

Now in your template you are attached to pageContent .

 <script type="text/x-handlebars" data-template-name="index"> {{#each pageContent}} <p>-{{title}}</p> {{/each}} <button {{action previous}}>Previous</button> <button {{action next}}>Next</button> <br/> {{view Ember.Select contentBinding="counts" selectionBinding="count"}} items per page </script> 

Here everything works in jsfiddle .