Durandal：多条路线，一个 ViewModel/View

Question

我有 3 条路线：items/one、items/two 和 items/three，它们都指向“items”vm/view。

在 items.js 的激活函数中，我正在检查 url，并在此基础上更改过滤器：

function activate(r) {
        switch (r.routeInfo.url) {
            case 'items/one': vm.filterType(1); break;
            case 'items/two': vm.filterType(2); break;
            case 'items/three': vm.filterType(3); break;
        }
        return init(); //returns a promise
    }

项目视图有一个菜单，其中包含一、二和三的按钮。 每个按钮都链接到这样的操作：

function clickOne() {
    router.navigateTo('#/items/one');
}
function clickTwo() {
    router.navigateTo('#/items/two');
}    
function clickThree() {
    router.navigateTo('#/items/three');
}

这一切正常，我在视图上得到了正确的过滤器。但是，我注意到，如果我在“一”上，然后转到“二”，则 ko 绑定变量会“实时”更新，也就是说，随着它们的变化，在激活之前promise 解析，这会导致转换发生两次（在抓取数据时，以及在激活函数返回之后）。

这只发生在这种情况下，其中视图和视图模型与前一个相同。我知道这是一种特殊情况，路由器可能正在使用 areSameItem = true 处理新路由的加载。我可以将虚拟机/视图分成三个并尝试从基本模型继承，但我希望有一个更简单的解决方案。

Answer 1

我可以通过在导航前对包含 div 的项目使用 ko.cleanNode() 删除 ko 绑定来解决此问题。

Answer 2

假设在您的父视图中，您使用 transition 引用了 router.activeItem，例如

<!--ko compose: {model: router.activeItem, 
    afterCompose: router.afterCompose, 
    transition: 'entrance'} -->
<!--/ko-->

然后入口转换发生在您设置以过滤当前视图的每条路线上。

但这种转换可能只发生在第一次访问时，从那时起，只有视图应该使用过滤后的数据进行更新。实现此目的的一种方法是设置一个可观察的filterType 并使用filterType.subscribe 调用带有skip 参数的router.navigateTo。

一些事情：

var filterType = ko.observable();

filterType.subscribe(function (val) {
    // Create an entry in the history but don't activate the new route to prevent transition
    // router plugin expects this without leading '/' dash.
    router.navigateTo(location.pathname.substring(1) + '#items/' + filterType(), 'skip');
    activate();
});

请注意，路由器插件需要 skipRouteUrl 而不带前导 / 斜杠来比较 context.path。 https://github.com/BlueSpire/Durandal/blob/master/App/durandal/plugins/router.js#L402

您的体验可能会有所不同。

最后为了支持activate中的深层链接：

function activate(routerdata) {
    // deep linking 
    if (routerdata && routerdata.filterType && (routerdata.filterType !== filterType() ) ) {
        filterType(routerdata.filterType);
    }

    return promise;
};