Question

我正在尝试构建我的第一个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>

JS

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

如果有人能给我一个正确的方法，那将是非常好的。

Answer 1

有多种方法可以实现您的目标。基本上，您需要在父路由或控制器中存储上次访问的overview/:item_id路由的状态。然后，您需要在解析overview路由模型之前检查此状态。如果state不为null（用户从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路由（在{{中传递存储的模型） 1}}）。

emberjs |保存路由状态和嵌套资源

1 个答案: