创建动态路线时出现灰烬错误

Question

Apologies if this has already been asked and I couldn't figure that out.

I am attempting to link an Ember dynamic Route with a Template. It's not working. The error for the below code is Error while processing route: favorite undefined is not a function

The idea is that the main page should show a list of favorites that are returned via Ajax. Each favorite should have a link. The user clicks a link and the favorite is injected into the relevant template on the same page.

The main page is working correctly. With the code below, the links are currently showing index.html/#/12345ab where 12345ab is the product_id .

HTML Template:

<script type="text/x-handlebars" id="favorites">
{{#each favorite in arrangedContent}}
    <div class="productBox">
        {{#link-to 'favorite' favorite.product_id}}
            <img {{bind-attr src=favorite.product_image}} />
        {{/link-to}}
    </div>
{{/each}}

{{outlet}}

</script>

<script type="text/x-handlebars" id="favorite">
    <h2>{{product_name}}</h2>
    <img {{bind-attr src=product_image}} />
</script>

Router code:

App.Router.map(function() {
    this.resource('favorites', { path: '/'});
    this.resource('favorite', { path: ':product_id' });
});

App.FavoritesRoute = Ember.Route.extend({
    model: function() {
        return Ember.$.ajax({
            //this returns correctly
        }).then(function(data) {
            return data.favorites;
        });
    }
});

App.FavoriteRoute = Ember.Route.extend({
    model: function(params) {
        return App.Favorites.findBy('product_id', params.product_id);
    }
});

Update:

The answer below gives the following code, but if the user goes directly to the page via the URL or a straight refresh, it fails due to the fact that the favorites model is not resolved yet. Exact error is: Cannot read property 'findBy' of undefined

App.FavoriteRoute = Ember.Route.extend({
    model: function(params) {
        return this.modelFor('favorites').findBy('product_id', params.product_id);
    }
});

Update 2: Entire Router code:

App.Router.map(function() {
    this.resource('favorites', { path: '/'});
    this.resource('favorite', { path: ':product_id' });
});

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return new Promise(function(resolve, reject) {
            Ember.$.ajax({
                url: 'MY_URL',
                dataType: 'jsonp',
                jsonp: 'callback'
            }).then(function(data) {
                resolve(data.favorites);
            });
        });
    },

    setupController: function(controller, model) {
        return this.controllerFor('favorites').set('model', model);
    }
});

App.FavoriteRoute = Ember.Route.extend({
    model: function(
        return this.controllerFor('favorites').get('model').findBy('product_id', params.product_id);
    }
});

Answer 1

By the looks of it, you want to find the model from the parent route. You can do it likes so:

App.FavoriteRoute = Ember.Route.extend({
   model: function(params) {
   this.modelFor('favorites').arrangedContent.findBy('product_id', params.product_id);
 }
});

UPDATE:

The problem is that your promise from the parent route isn't getting resolved correctly. You're returning a promise but the result of that promise isn't getting resolved ie (return data.favorites) is not resolving the promise.

Update it to:

App.FavoritesRoute = Ember.Route.extend({
    model: function() {
      return new Promise(function(resolve, reject) {
        Ember.$.ajax('yourURL').then(
          function(data){
            resolve(data.favorites); 
        });
    });    
  }
});

Also incorporate the initial feedback from this answer. I have a working JSBin going against an actual endpoint to show it works: http://jsbin.com/boloya/3/edit

PS Look out for params.product_id, that comes in as a string. You made need to cast it to the required type in order for the findBy to work correctly.

PSS I should also add, Ember.$.ajax returns a promise, but you want the model to be data.favorites which is the need for the outer promise. If you just returned Ember.$.ajax and accessed everything via model.favorites you wouldn't need it.

Answer 2

Your routes need to be nested for a child resource to have access to a parent via #modelFor . However, if your UI isn't nested, your routes probably shouldn't be, since nesting routes also wires up a corresponding view hierarchy.

You could always define the model for the favorite route in terms of a subset of the data returned by your ajax call:

//routes/favorite.js
model: function() {
    return Ember.$.getJSON('/favorites').then(function(favorites) {
      return favorites.findBy('id', params.product_id');
    });
}

but then, the top-level .getJSON('/favorites ) call would be made multiple times, every time the user enters /favorites , and every time he enters /favorites/:id`.

Instead, you can have the application set up the FavoritesController once upon entry. That way you can share data, but favorite doesn't have to be a child route of favorites . It might look something this:

//routes/application.js
model: function() {
    return Ember.$.getJSON('/favorites');
},

setupController: function(controller, model) {
  this.controllerFor('favorites').set('model', model);
}

and

//routes/favorite.js
model: function(params) {
  return this.controllerFor('favorites').find('id', params.id);
}

That way, the JSON is only loaded once, ApplicationRouter is wiring up your FavoritesController for you, and the data is shared with the favorite resource.

Answer 3

With some help from the Ember IRC channel, this is the working code. In essence, it creates an Index template for both the favorites and the favorite template to render into. Then the favorite route can access it's parent route favorites and yet still render into the same template area.

HTML

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="favorites">
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="favorites/index">
{{#each favorite in arrangedContent}}
    <div class="productBox">
        {{#link-to 'favorite' favorite.product_id}}
            <img {{bind-attr src=favorite.product_image}} />
        {{/link-to}}
    </div>
{{/each}}

{{outlet}}

</script>

<script type="text/x-handlebars" id="favorite">
    <h2>{{product_name}}</h2>
    <img {{bind-attr src=product_image}} />
</script>

Router.js

App.Router.map(function() {
    this.resource('favorites', { path: '/'}, function () {
      this.resource('favorite', { path: ':product_id' });
    });
});

App.IndexRoute = Ember.Route.extend({
  redirect: function () {
    this.replace('favorites');
  }
});

App.FavoritesRoute = Ember.Route.extend({
    model: function() {
        return new Promise(function(resolve) {
            Ember.$.ajax({
                url: 'MY_URL',
                dataType: 'jsonp',
                jsonp: 'callback'
            }).then(function(data) {
                resolve(data.favorites);
            });
        });
    }
});

App.FavoriteRoute = Ember.Route.extend({
  model: function (params) {
     return this.modelFor('favorites').findBy('product_id', params.product_id);
  }
});