Ember.js emberjs |保存路由和嵌套资源的状态

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

举个例子：

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

HTML

---

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

实现你的目标有多种方法。基本上，您需要在父路由或控制器中存储上次访问的

overview/：item_id

路由的状态。然后，在解析

概述

路由的模型之前，需要检查此状态。如果状态不为null（用户从

概述/：item_id

中选择了某个项目），则中止当前转换并启动新转换（到

overview/：所选项目\u 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.transition（'overview.item'，item）

）会更容易

App.Router.map(function(){
    this.route('info'); 
    this.resource('overview', function () {
        this.resource('item', { path : '/: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);
    }
});