Ember Data DS.Store.filter（）不適用於嵌套路由？

Question

我正在使用Ember v1.4.0和Ember Data v1.0.0 beta 5.我無法使DS.Store.filter（）函數正常工作。當我去#/orders路線時，我看到了我的訂單清單。但是當我走到路線#/orders/created時，無論我如何實現過濾器功能，都會顯示完整的訂單列表。另外，當我編輯#/orders路線並在其上放置過濾器時，它將在該路線和#/orders/created路線上起作用。它的模型在兒童路線中永遠不會改變。任何幫助將不勝感激。

的JSON從服務器返回的是：

{ 
     "orders": [ 
     { 
      "id": 1, 
      "name": "Order 1", 
      "creationDate": "2014-01-01", 
      "step": "created", 
      "test": true 
     }, 
     { 
      "id": 2, 
      "name": "Order 2", 
      "creationDate": "2014-02-02", 
      "step": "created", 
      "test": false 
     }, 
     { 
      "id": 3, 
      "name": "Order 3", 
      "creationDate": "2014-03-03", 
      "step": "outforbid", 
      "test": true 
     } 
     ] 
    } 

的模型是：

App.Order = DS.Model.extend({ 
    name: DS.attr('string'), 
    creationDate: DS.attr('string'), 
    step: DS.attr('string'), 
    test: DS.attr('boolean'), 

    isCreated: function() { 
     return this.get('step') == 'created'; 
    }.property('step') 
}); 

這裏是我的模板：

<!-- orders template --> 
<script type="text/x-handlebars" data-template-name="orders"> 
    <h2>Orders</h2> 
    {{order-list orders=model}} 
</script> 

<!-- component - order list --> 
<script type="text/x-handlebars" data-template-name="components/order-list"> 
    <ul> 
    {{#each order in orders}} 
    <li>{{order-list-element name=order.name creationDate=order.creationDate}}</li> 
    {{/each}} 
    </ul> 
</script> 

<!-- component - order list element --> 
<script type="text/x-handlebars" data-template-name="components/order-list-element"> 
    <strong>{{name}}</strong>: {{prettifyDate creationDate}} 
</script> 

和路由：

App.Router.map(function() { 
    this.resource('orders', function() { 
     this.route('created'); 
    }); 
}); 

App.AuthenticatedRoute = Ember.Route.extend({ 
    beforeModel: function(transition) { 
     var applicationController = this.controllerFor('application'); 
    if (!localStorage.token) { 
     applicationController.set('savedTransition', transition); 
      this.transitionTo('login'); 
     } else { 
      applicationController.login(); 
     } 
    }, 

    actions: { 
     error: function(reason, transition) { 
      if(reason.status === 401) { 
       var applicationController = this.controllerFor('application'); 
       applicationController.set('savedTransition', transition); 
       this.transitionTo('login'); 
      } else { 
       alert("Unexpected error: " + error.message); 
       console.log("Unexpected error: " + error.message); 
      } 
     } 
    } 
}); 

App.OrdersRoute = App.AuthenticatedRoute.extend({ 
    model: function() { 
     return this.store.find('order'); 
    } 
}); 

App.OrdersCreatedRoute = App.AuthenticatedRoute.extend({ 
    model: function() { 
     return this.store.filter('order', function(order) { 
      return (order.get('step') === 'created'); 
     }); 
    } 
}); 

和應用程序設置：

App = Ember.Application.create(); 

App.ApplicationAdapter = DS.RESTAdapter.extend({ 
    headers: { 
     "token": localStorage.token 
    }, 
    namespace: 'api' 
}); 

我使用filterBy和父模型的嘗試：

model: function() { 
    return this.modelFor('orders').filterBy('isCreated'); 
} 

，並用計算出的值：

model: function() { 
    return this.store.filter('order', function(order) { 
     return order.get('isCreated'); 
    }); 
} 

但沒有任何工作。任何人都可以請給我一些見解，爲什麼嵌套路線上的過濾器功能不起作用？謝謝！

Answer 1

由於資源如何自動生成路由名稱，這是一個棘手的問題。看看這張表的細節：http://emberjs.com/guides/routing/defining-your-routes/#toc_resources

基本上，你需要重構你的路線和模板名稱使用orders.index和orders.created。這裏有一個工作版本http://jsbin.com/mekipali/12/edit

App.OrdersRoute變得App.OrdersIndexRoute，你需要創建一個額外的模板：

App.OrdersIndexRoute = Ember.Route.extend({ 
    model: function() { 
     return this.store.find('order'); 
    } 
}); 

App.OrdersCreatedRoute = Ember.Route.extend({ 
    model: function() { 
     return this.store.filter('order', function(order) { 
      return (order.get('step') === 'created'); 
     }); 
    } 
}); 

而且模板：

<!-- orders index template --> 
<script type="text/x-handlebars" data-template-name="orders/index"> 
    <h2>Orders</h2> 
    {{order-list orders=model}} 
</script> 

<!-- orders created template --> 
<script type="text/x-handlebars" data-template-name="orders/created"> 
    <h2>Orders Created</h2> 
    {{order-list orders=model}} 
</script>