CODEWITHSUNDEEP
javascriptember.js
James_1x0
James_1x0

Reputation: 931

EmberJS: Refreshing a model?

Hello again everyone.

EDIT: I want to emphasize that I can find no docs on the solution for this.

I am using a route to perform a search query to my server. The server does all the data logic and such and returns a list of objects that match the keywords given. I am taking those results and feeding them to the model so that I can use the {{#each}} helper to iterate over each result.

The problem I am having is that the model does not want to refresh when the searchText (search input) changes. I've tried several things. I'm not worried about creating too many ajax requests as my server performs the search query in 2ms. Here's what I have now.

App.SearchView = Ember.View.extend({...

EDIT:

Thank you for the answer.

App.SearchView = Ember.View.extend({
    didInsertElement: function () {
        this._super();
        Ember.run.scheduleOnce('afterRender', this, this.focusSearch);
    },
    focusSearch: function () {
        $(".searchInput").focus().val(this.get("controller").get('searchTextI'));
    }
});

App.SearchRoute = Ember.Route.extend({
    model: function () {
        return this.controllerFor('search').processSearch();
    }
});

App.SearchController = Ember.ArrayController.extend({
    searchTextI: null,
    timeoutid: null,
    processid: null,
    updateSearch: function () {
        if(this.get('timeoutid')) {clearTimeout(this.get('timeoutid')); }
        var i = this.get('searchTextI');
        var sc = this;
        clearTimeout(this.get('processid'));
        this.controllerFor('index').set('searchText', i); //set the search text on transition
        if(i.length < 3) {
            this.set('timeoutid', setTimeout(function () {
                sc.controllerFor('index').set("transitioningFromSearch", true);
                sc.transitionToRoute('index');
            }, 1500));
        } else {
            var self = this;
            this.set('processid', setTimeout(function() {
                self.processSearch().then(function(result) {
                    self.set('content', result);
                });
            }, 1000));
        }
    }.observes('searchTextI'),
    processSearch: function () {
        return $.getJSON('http://api.*********/search', { 'token': guestToken, 'search_query': this.get('searchTextI') }).then(function(data) { if(data == "No Results Found.") { return []; } else { return data; } }).fail(function() { return ["ERROR."]; });
    }
});

Upvotes: 1

Views: 380

Answers (2)

Panagiotis Panagi
Panagiotis Panagi

Reputation: 10087

Don't observe anything within a route and don't define any computed properties. Routes are not the place for these. Apart from that, the model doesn't fire because controller is undefined.

One way to achieve what you want:

App.SearchRoute = Ember.Route.extend({
    model: function () {
      this.controllerFor('search').searchQuery();
    }.observes('controller.searchText') //not triggering an ajax request...
});



App.SearchController = Ember.ArrayController.extend({
   searchQuery: function() {
     return $.getJSON('http://api.**************/search', { 'token': guestToken, 'search_query': t }).fail(function() {
       return null; //prevent error substate.
     });
   }

   onSearchTextChange: function() {
     var controller = this;
     this.searchQuery().then(function(result) {
       controller.set('content', result);
     });
   }.observes('searchText')
});

Upvotes: 2

user663031
user663031

Reputation:

Putting an observes on the model hook is not going to do anything. You should simply do what you were thinking of doing and say

processSearch: function () {
    this.set('content', $.getJSON....);
}

Upvotes: 0

Related Questions