自动和条件路由 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

Working Demo

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

hbs

<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

hbs

<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#/category/1/product/1