0
votes

For reasons beyond the scope of this question, I have to populate an Ember data model named Activity in my SearchRoute using Ember.$.getJSON in the model hook like this:

App.SearchRoute = Ember.Route.extend({
    model: function (params) {

    // Create a promise to return to the model hook. The promise will return a DS.RecordArray.
    var modelPromise = new Ember.RSVP.Promise(function (resolve, reject) {

        // Make the AJAX call to retrieve activities that match the search criteria
        Ember.$.getJSON('/services/activities?query=' + params.q).then(function (data) {
            data.activities.forEach(function (activity) {

                // If the current activity does not already exist in the store...
                    if (!this.store.hasRecordForId('activity', activity.id)) {

                        // add the activity to the store
                        this.store.createRecord('activity', {
                            id: activity.id,
                            title: activity.propertyBag.title
                        });
                    }
               }.bind(this));

               resolve(this.store.all('activity', { query: params.q }));

            }.bind(this));
        }.bind(this));

        // Return the DS.RecordArray as the model for the search route
        return modelPromise;
    }
});

Then, in my SearchController I do some model sorting and filtering before returning the results from a computed property that is bound to a template that displays the results, like this:

App.SearchController = Ember.ArrayController.extend({
    filteredActivities: function () {
        var model = this.get('model');

        // complete various model sorting and filtering operations

        return model;
    }.property('model')
});

Here's the template:

<script type="text/x-handlebars" data-template-name="activities">
    {{#each item in filteredActivities}}
        {{item.title}}
    {{/each}}
</script>

Every time a search is executed, the model hook in the SearchRoute is refreshed, the AJAX request is made, and the store is updated with new Activity records, if necessary.

The problem is, even if I do create new records in the store using createRecord and return the new store query results to my model hook, the filteredActivities property does not get fired and the template does not update.

I would think that because I'm returning a newly updated DS.RecordArray to the model hook, that Ember would consider my model as having changed and fire any computed properties watching for changes to the model, but I must be missing something.

Does anybody have any ideas?

Sorry for the long post, and thank you so much for taking the time to consider my issue!

2

2 Answers