余烬 |保存路由和嵌套资源的状态答案

【问题标题】：emberjs | save state of routes and nested resources余烬 |保存路由和嵌套资源的状态
【发布时间】：2014-09-15 13:29:28
【问题描述】：

我正在尝试构建我的第一个 emberjs 应用程序，我想知道如何保存嵌套路由的状态以在当前会话中重新访问顶级路由时重建该状态。

举个例子：

假设用户从 /overview/item1 切换到 /info 然后返回 /overview/ 并希望将他重定向到 /overview/item1

HTML

<div id="navigation">
   {{#link-to 'info' class='link' }}Info{{/link-to}}
   {{#link-to 'overview' class='link'}} Overview {{/link-to}}
</div>

App.Router.map(function(){
    this.route('info'); 
    this.resource('overview', function () {
        this.resource('item', { path : '/:item_id'});
    });
});

如果有人能提示我正确的方法，那就太好了。

【问题讨论】：

标签： ember.js routes router

【解决方案1】：

有多种方法可以实现您的目标。基本上，您需要将上次访问的overview/:item_id 路由的状态存储在父路由或控制器中。然后，您需要在解析overview 路由的模型之前检查此状态。如果状态不为空（用户从overview/:item_id 中选择了某个项目），则中止当前转换并开始新的转换（到 overview/:selected_item_id)。

代码中的示意图解决方案：

// 1st approach

App.OverviewController = Ember.ObjectController.extend({

    selectedItem: null
});

App.OverviewRoute = Ember.Route.extend({

    beforeModel: function(transition) {
        if (this.get('controller.selectedItem')) {
            transition.abort();
            this.transitionTo('overview.item', this.get('selectedItem'));
        }
    }
});

App.OverviewItemRoute = Ember.Route.extend({

    afterModel: function(model) {
        this.controllerFor('overview').set('selectedItem', model);
    }
});

// 2nd approach (less code)

App.OverviewRoute = Ember.Route.extend({

    beforeModel: function(transition) {
        if (this.get('controller.selectedItem')) {
            transition.abort();
            this.transitionTo('overview.item', this.get('selectedItem'));
        }
    },

    setupController: function(controller) {
        controller.reopen({ selectedItem: null });
    }
});

App.OverviewItemRoute = Ember.Route.extend({

    afterModel: function(model) {
        this.controllerFor('overview').set('selectedItem', model);
    }
});

重要的是保留项目本身，而不是 id，因为将来加载 overview/:item_id 路由会更容易（在 this.transitionTo('overview.item', item) 中传递存储的模型）。

【讨论】：