Question

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

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

我需要一些指示如何进行操作，因为当我复制产品网址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));
  }
});
....

编辑 - 过渡到第一个类别的第一个对象

http://jsbin.com/felalizo/1#/category/1/product/1

自动和条件路由Emberjs

2 个答案: