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>

Ember Data DS.Store.filter（）没有在嵌套路由上工作？

1 个答案: