Durandal - 根据网址或路线隐藏页面部分

Pie*_*lho 2 javascript jquery durandal durandal-2.0

在我的durandal应用程序中,除主页之外的每个页面都有一个左侧导航栏.这个左侧导航栏应该在刷新时更新,但它应该驻留在shell.html上.

问题是我无法在主页上正确隐藏它.当我在主页上时,我可以使用jquery hide()方法隐藏leftnav div,但问题是我只能在data-bindind之后使用jquery代码,直到我可以看到导航栏.我试图使用durandal组合,但我不知道如何只在主页中隐藏导航栏,因为我不知道如何知道我是否在主页上或不在shell.js内.

任何想法?

Mat*_*vis 5

在您的视图模型中,您需要通过创建一个侦听当前指令值的计算机来挂钩您的路由器:

var ko = require('knockout');
var router = require('plugins/router');

function viewModel() {
    this.currentRoute = ko.computed(function() {
        return router.activeInstruction().fragment;
    });
}
Run Code Online (Sandbox Code Playgroud)

然后,您可以使用视图中的可见绑定来引用此变量.

<!-- home route only -->
<div data-bind="visible: currentRoute() == 'home'></div>

<!-- non-home routes -->
<div data-bind="visible: currentRoute() != 'home'></div>
Run Code Online (Sandbox Code Playgroud)

如果需要更复杂的逻辑,可以创建一个特殊的计算函数,对当前路径进行特定测试,然后引用该变量.例如:

this.isSpecialRoute = ko.computed(function() {
    var re = /matchspecialroute/;
    return re.test(this.currentRoute());
}, this);
Run Code Online (Sandbox Code Playgroud)

  • @MatthewJamesDavis优秀的答案!但是请确保在viewModel的`detached`处理程序中处理你的计算器.否则,你会在这里像筛子一样泄漏.更好的是,如果你已经升级到KnockoutJS的最新版本,你可以使用`pureComputed` observable,因为你在答案中给出的计算中没有副作用. (3认同)
  • 我只需要稍微改编一下代码:只有当router.aciveInstruction()不为null(只是if条件)时才返回router.activeInstruction().片段谢谢! (2认同)