Question

这是一张图片，展示了我给予的设计以及需要在ember中开发的设计。我对如何处理ember中的路由和实现感到有些不知所措。

因此，为了解释这个简化的例子，假设我有一个搜索结果页面（结果是从后端返回的），正如您所期望的那样，搜索结果总是不一样。但是，当我点击其中一个搜索结果时，我需要能够打开产品页面作为嵌套路线。

这会引发一些问题，因为稍后返回的人可能无法获得相同的产品列表。我将如何处理路由，这样的事情？

Router.map(function() {
    this.resource('search', function(){
        this.route('product', {route: ':productID'}, function())
    });
});

我也不确定如何在容器视图，视图，组件等方面设置层次结构。

帮助？

Answer 1

我认为您需要创建类似

的路线

this.resource('products', function() {
    this.resource('product',{path: '/:id'});
});

之后，您需要创建2条路线ProductsRoute和ProductRoute。

App.ProductsRoute = Ember.Route.extend({
  model: function() {
    return this.get('store').find('product');
  }
});
App.ProductRoute = Ember.Route.extend({
  model: function(product) {
    return this.get('store').find('product', product.id);
  }
});

当您尝试打开页面/产品时，您将获得所有产品。如果您将使用RestAdapter，它会向您的REST API /产品发送请求我认为您需要在ProductsController中创建操作来搜索产品：

App.ProductsController = Ember.ArrayController.extend({
    actions: {
        searchProducts: function() {
            var queryText = this.get('queryText');
            if (queryText) {
                return this.get('store').filter('product', {query: queryText}, function(item) {
                    return true;
                });
            }
        }
    }
});

此操作使用/ products？query = queryText向您的api发送请求在您的产品模板中创建搜索表单，并使用类似{{action 'searchProduct'}}的搜索按钮。另外，在您的模板中，您需要显示该使用的所有产品{{#each item in model}}，并创建每个产品使用{{#link-to 'product' item}}的链接。我认为最佳做法是为搜索框http://guides.emberjs.com/v1.10.0/components/创建组件。

Ember如何处理搜索结果子路由的路由

1 个答案: