ember.js链接到帮助器的“ this”

Question

I am trying to get hands-on experience with popular ember.js framework and quite amazed with lots of magical things.

One such is this in link-to handlebar helper which I couldn't digest.

Following is my code scenarios:

// handlebar script
<script type='text/x-handlebars' data-template-name='products'>
  <h1>Products</h1>
  <ul class='list-unstyled col-md-8'>
    {{#each}}
      <h2>{{title}}</h2>
      <p>{{#link-to 'product' this class='btn btn-success' }}Buy for ${{price}}{{/link-to}}</p>
    {{/each}}
  </ul>
</script>

// in app.js    
App.PRODUCTS = [
  {
    title: 'Chair',
    price: 99,
    description: 'Chair is...',    
  },
  ...
];    
App.Router.map(function() {
  this.resource('products');
  this.resource('product', { path: '/products/:title'});  
});    
App.ProductsRoute = Ember.Route.extend({
  model: function() {
    return App.PRODUCTS;
  }
});
App.ProductRoute = Ember.Route.extend({
  model: function(params) {    
    return App.PRODUCTS.findBy('title', params.title);
  }
});

I came to know that this refers to current product in template but my questions are:

1. Does it interact with App.ProductRoute or router ? If yes how?
2. Can we replace this with this.title ?

Answer 1

1. Yes, the link-to helper does. The link-to helper builds a URL based on the information you give it. Using the route name, it looks up the route defined in your router and uses the path that you specified. Then it uses the ID from the object to fill in the dynamic segment(s). It also makes sure to correctly fill in parent routes if necessary.

2. No, you need to use this because it needs the id to build the URL. You used to be able to pass in just this.id , but I don't think you can do that any more. (It's a bad idea anyway.) Also, Ember.js will use the object you pass it as the model for the route, thereby skipping the model hook in your ProductRoute . And the object you pass it can either be a fully-loaded model, or a promise of a model.