CODEWITHSUNDEEP
ember.jsquery-string
ultimatemonty
ultimatemonty

Reputation: 211

Updating a model filtered with queryParams without transitioning in EmberJS

In my app I have a route where I'm using queryParams to filter an array.. When I add a new item to the array that matches the filter criteria the template does not update with the new item.

Super simple example bin at http://emberjs.jsbin.com/qetami/1#/colors?type=secondary

In that example, while filtered to Secondary colors click the Add Color button and add a new color with Color Type set to secondary. The color does not immediately appear. If you change the filter then go back to Secondary it appears. It automatically appears when on the unfiltered/default route.

I've tried with and without the queryParams hook in the Colors route with no luck.

This seems like it should be straight forward but I've run into a wall.

Upvotes: 0

Views: 828

Answers (2)

Bradley Schaefer
Bradley Schaefer

Reputation: 156

I couldn't really get something working with .observes() however I came up with a working version of your example if you leverage actions bubbling up through the routes so that you have a good spot to call this.refresh() in order to reload the filtered model.

http://jsbin.com/qomiba/3/edit

Side-note, I found it confusing that you had references to 'colors' in different places that meant different things.

Upvotes: 2

Asgaroth
Asgaroth

Reputation: 4334

From emberjs.com/guides

This will offload searching all of the possible records to the server, while still creating a live updating list that includes records created and modified on the client.

App.PostsFavoritedRoute = Ember.Route.extend({
  model: function() {
    var store = this.store;

    // Create a filter for all favorited posts that will be displayed in
    // the template. Any favorited posts that are already in the store
    // will be displayed immediately;
    // Kick off a query to the server for all posts that
    // the user has favorited. As results from the query are
    // returned from the server, they will also begin to appear.
    return store.filter('post', { favorited: true }, function(post) {
      return post.get('isFavorited');
    });
  }
});

Upvotes: 0

Related Questions