自动和条件路由Emberjs

Question

如果用户直接访问网站www.mysite.com，路由应该过渡到第一个品类的第一个产品页面。

如果用户复制粘贴特定产品的url。用户应该导航到特定的产品页面。

我需要一些指导如何去做，因为当我复制一个产品url www.mysite.com/Men/shirts时，它会导航到默认的第一类别第一产品，因为我的transitionTo

我的router.js是这样的

 MyApp.Router.map(function () {
   this.resource('categories', {path: '/'}, function () {
     this.resource('category', { path: '/:category_id'}, function () {
        this.resource('product', { path: '/:product_id' });
     });
   });
});

我的类别路由的后模型是这样的

afterModel: function(categories,transition){
       this.transitionTo('category',categories.get('firstObject'));
}, 

我的类别路由后模型看起来像这样

afterModel: function (category) {
        var self = this;
        self.transitionTo('product', category.get('products').get('firstObject'));
    }

Answer 1

您可能应该从索引路由进行默认转换。

 MyApp.CategoriesIndexRoute = Em.Route.extend({
   afterModel: function(model) {
    this.transitionTo('category',model.get('firstObject')); 
   }  
 });
 MyApp.CategoryIndexRoute = Em.Route.extend({
   afterModel: function(model) {
    this.transitionTo('product', Em.get(model, 'products.firstObject')); 
   }  
 });

子资源/路由从此PR继承父模型。如果您使用的是旧版本

，您可以使用this.modelFor演示工作

Answer 2

这是一个遵循你的路由结构的例子，

http://emberjs.jsbin.com/viyagaga/1/edit

具体类别:http://emberjs.jsbin.com/viyagaga/1#/category/2

特定产品:http://emberjs.jsbin.com/viyagaga/1#/category/2/product/4

哈佛商学院

<script type="text/x-handlebars" data-template-name="categories">
    this is all categories<br/>
    <ul>
    {{#each category in model}}
    <li>
      {{#link-to "category" category.id}}
        id:{{category.id}}&nbsp;name:{{category.name}}
      {{/link-to}}
    </li>
    {{/each}}
    </ul>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="category">
    this is category {{model.name}}<br/>
    with products:<br/>
    <ul>
    {{#each product in model.products}}
    <li>
      {{#link-to "product" product.id}}
        id:{{product.id}}&nbsp;name:{{product.name}}
      {{/link-to}}
    </li>
    {{/each}}
    </ul>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="product">
    this is product:<br/>
    {{model.name}}<br/>
  </script>

js

App = Ember.Application.create();
App.Router.map(function () {
   this.resource('categories', {path: '/'}, function () {
     this.resource('category', { path: 'category/:category_id'}, function () {
        this.resource('product', { path: 'product/:product_id' });
     });
   });
});
App.IndexRoute = Ember.Route.extend({
  beforeModel: function() {
    this.transitionTo("categories");
  }
});
App.CategoriesRoute = Ember.Route.extend({
  model:function(){
    return allCategoriesData;
  }
});
App.CategoryRoute = Ember.Route.extend({
  model: function(params) {
    return allCategoriesData.findBy("id",parseInt(params.category_id,10));
  }
});
App.ProductRoute = Ember.Route.extend({
  model: function(params) {
   return this.modelFor("category").products.findBy("id",parseInt(params.product_id,10));
  }
});
var allCategoriesData = [
  {"id":1,"name":"Category1",
   "products":[
     {"id":1, "name":"product11"},
     {"id":2, "name":"product12"}
   ]
  },
  {"id":2,"name":"Category2",
   "products":[
     {"id":3, "name":"product21"},
     {"id":4, "name":"product22"},
     {"id":5, "name":"product23"}
   ]
  },
  {"id":3,"name":"Category3",
   "products":[
     {"id":6, "name":"product31"}
   ]},
  {"id":4,"name":"Category4",
   "products":[
     {"id":7, "name":"product41"},
     {"id":8, "name":"product42"},
     {"id":9, "name":"product43"},
     {"id":10, "name":"product43"}
   ]}
];

如果你需要在自己的窗口中显示每条路由，而不需要相应的主路由，那么路由和hbs模板需要更改如下，

http://emberjs.jsbin.com/cajalosu/1/edit

哈佛商学院

<script type="text/x-handlebars" data-template-name="categories">
    this is all categories<br/>
    <ul>
    {{#each category in model}}
    <li>
      {{#link-to "category" category.id}}
        id:{{category.id}}&nbsp;name:{{category.name}}
      {{/link-to}}
    </li>
    {{/each}}
    </ul>
  </script>
  <script type="text/x-handlebars" data-template-name="category">
    this is category {{model.name}}<br/>
    with products:<br/>
    <ul>
    {{#each product in model.products}}
    <li>
      {{#link-to "product" model.id product.id}}
        id:{{product.id}}&nbsp;name:{{product.name}}
      {{/link-to}}
    </li>
    {{/each}}
    </ul>
  </script>
  <script type="text/x-handlebars" data-template-name="product">
    this is product:<br/>
    {{model.name}}<br/>
  </script>

js

....
App.Router.map(function () {
  this.route('categories', {path: '/'});
  this.resource('category', { path: 'category/:category_id'});
  this.resource('product', { path: 'category/:category_id/product/:product_id' });
});
....
App.ProductRoute = Ember.Route.extend({
  model: function(params) {
   return allCategoriesData.findBy("id",parseInt(params.category_id,10)).products.findBy("id",parseInt(params.product_id,10));
  }
});
....

EDIT - 切换到第一类对象

http://jsbin.com/felalizo/1/类别/1/产品/1