在Ember.js中为模板渲染2个模型时出错

Question

I have a template in wish I have 2 components that represents different Models. I need to create a model that contains both datas, for each component. If I have only one model everything works fine, but when I add other one, then this error happens in the console.

Error while processing route: events record is undefined ember$data$lib$system$store$finders$$_find/</<@http://localhost:1361/test/frontend/bower_components/ember-data/ember-data.prod.js:7475:11
Backburner.prototype.run@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:222:18
ember$data$lib$system$store$$Store<._adapterRun@http://localhost:1361/test/frontend/bower_components/ember-data/ember-data.prod.js:13133:16
ember$data$lib$system$store$finders$$_find/<@http://localhost:1361/test/frontend/bower_components/ember-data/ember-data.prod.js:7470:1
tryCatch@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:53070:14
invokeCallback@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:53085:15
publish@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:53053:9
@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:31253:7
Queue.prototype.invoke@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:901:9
Queue.prototype.flush@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:965:11
DeferredActionQueues.prototype.flush@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:765:11
Backburner.prototype.end@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:158:9
Backburner.prototype.run@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:226:13
run@http://localhost:1361/test/frontend/bower_components/ember/ember.prod.js:19151:12
ember$data$lib$adapters$rest$adapter$$RestAdapter<.ajax/</hash.success@http://localhost:1361/test/frontend/bower_components/ember-data/ember-data.prod.js:1728:15
n.Callbacks/j@http://localhost:1361/test/frontend/bower_components/jquery/dist/jquery.min.js:2:26920
n.Callbacks/k.fireWith@http://localhost:1361/test/frontend/bower_components/jquery/dist/jquery.min.js:2:27738
x@http://localhost:1361/test/frontend/bower_components/jquery/dist/jquery.min.js:4:11251
.send/b/<@http://localhost:1361/test/frontend/bower_components/jquery/dist/jquery.min.js:4:14765

The route of the template that contains the components is:

App.EventsRoute = Ember.Route.extend({
    model: function()
    {
        return Ember.RSVP.hash({
            event:  this.store.find('event'),
            featured: this.store.find('event', 'featured')
        });
    }

});

Here is my template:

<script type="text/x-handlebars" id="events">
    <div class="col-xs-8 pull-left">
    {{#each event as |event|}}
        {{#event-box event=event}}{{/event-box}}
    {{else}}
    no events
    {{/each}}
    ...
            {{#each featured as |highlight|}}
                {{#highlight-event hlevent=highlight}}
                {{/highlight-event}}
            {{else}}
            No Highlights
            {{/each}}
           ...

</script>

Does anyone knows why this error happens and what can I do to solve it?

Answer 1

this.store.find('event', 'featured') is invalid.

Also, find is deprecated.

With the latest Ember Data, you should use store.query() .

You'd probably use it like

this.store.query('event', {featured: true})

or

this.store.query('event', {filter: 'featured'})

You'll need to adjust your adapter accordingly. Something like:

urlForQuery: function(query, modelName) {
  if (query && query.featured === true) {
    delete query.featured;
    return this._buildURL(modelName, 'featured');
  }

  return this._super(query, modelName);
}

This should generate an URL like http://..../events/featured .