Question

我正在使用duraldal v2，并且在其中一个页面上我想切换视图而不重新激活模型。

为实现这一目标，我使用 compose 绑定从v1开始使用连接到observable的 view ，在我的导航链接中通过内联点击绑定进行更改：

    <ul class="nav nav-tabs">
        <li data-bind="css: {active:activeView() == 'view1'}"><a href="#" data-bind="click: function(){setView('view1')}">View 1</a></li>
        <li data-bind="css: {active:activeView() == 'view2'}"><a href="#" data-bind="click: function(){setView('view2')}">View 2</a></li>
        . . .
    </ul>
    <div data-bind="compose: {view: activeView, activate: true, area: 'settings', transition: 'entrance', cacheViews: true}"></div>

VM：

define(['knockout'], function (ko) {
return {
    activeView: ko.observable()
    ,setView: function(view) {
        this.activeView(view);
    }
    ,activate: function (args) {
        var self = this;
        return system.defer(function(dfd) {
            self.setView('view1');
            dfd.resolve(true);
        }).promise();
    }
    . . .

我相信这是一种尴尬的方式，在v2中应该有更优雅的方式来做到这一点。据我所知，我不能像在ko样本中那样使用子路由器，因为它每次都会重新加载模型。

有什么想法吗？

Answer 1

对我来说很好看。

你不喜欢内联函数吗？你可以这么做：

    <ul class="nav nav-tabs">
        <li data-bind="css: {active:activeView() == 'view1'}"><a href="#" data-bind="click: setView1">View 1</a></li>
        <li data-bind="css: {active:activeView() == 'view2'}"><a href="#" data-bind="click: setView2">View 2</a></li>
        . . .
    </ul>

和：

return {
    activeView: ko.observable()
    ,setView1: function() { this.activeView('view1') },
    ,setView2: function() { this.activeView('view2') },
...

如果此功能对您来说非常普遍，您可以考虑将其转换为可能会像这样填充模式的小部件。

Durandal：无需重新加载模型即可切换视图

1 个答案: