Durandal.js 2.0在activate方法中设置文档标题

时间:2013-09-10 08:38:33

标签: durandal

在我的shell中,我设置了我的路线:

router.map([
            { route: '', title: 'Search', moduleId: 'viewmodels/search/search' },
            { route: 'location/:paramX/:paramY', title: 'Location', moduleId: 'viewmodels/location/location' }
        ]).buildNavigationModel();

我有一个像这样的激活方法:

activate: function(paramX, paramY) {
    // TODO: set document title
    // TODO: do something with input params    
}

对于位置页面,文档标题设置为Location | [我的应用名称]。我想将此更改为由激活方法(paramX,paramY)中的params组成,用于我的位置页面的activate方法。我该怎么做?

3 个答案:

答案 0 :(得分:10)

您可以通过覆盖路由器进程的默认行为来设置标题来实现此目的。

导航完成后始终设置标题,因此之前已调用viewmodel的activate方法。 Durandal 2.0目前的实施是:

   router.updateDocumentTitle = function(instance, instruction) {
        if (instruction.config.title) {
            if (app.title) {
                document.title = instruction.config.title + " | " + app.title;
            } else {
                document.title = instruction.config.title;
            }
        } else if (app.title) {
            document.title = app.title;
        }
    };

这在completeNavigation中的方法router.js中调用。

instance param中,您拥有要激活的ViewModel,因此可能的解决方案是覆盖updateDocumentTilteshell.js中的main.js函数并使用{{ 1}}获取您想要的值。例如,您可以执行以下操作(确保您拥有instanceapp实例):

router

在这段代码中,我们检查实例(当前的ViewModel)是否包含方法 router.updateDocumentTitle = function (instance, instruction) { if (instance.setTitle) document.title = instance.setTitle(); else if (instruction.config.title) { if (app.title) { document.title = instruction.config.title + " | " + app.title; } else { document.title = instruction.config.title; } } else if (app.title) { document.title = app.title; } }; ,如果是,那么我们得到调用该函数的标题。然后在我们的viewmodel中我们可以有类似的东西:

setTitle

如果您的viewmodel不包含此方法,那么它应该属于当前行为。

答案 1 :(得分:3)

以下是我如何实现它:

    activate: function (product, context) {
        // Update the title
        router.activeInstruction().config.title = "Buy " + product;
        ...
        ...
        ...
        ...

它有效,但我不知道这是否是 批准的 方法。

答案 2 :(得分:0)

我需要为此使用observable,因为标题来自的数据是由AJAX在activate方法中加载的。

所以我把它放在我的应用程序引导代码中:

var originalRouterUpdateDocumentTitle = router.updateDocumentTitle;
router.updateDocumentTitle = function (instance, instruction) {
    if (ko.isObservable(instance.documentTitle)) {
        instruction.config.title = instance.documentTitle;
    }
    return originalRouterUpdateDocumentTitle(instance, instruction);
};

如果视图模型具有名为documentTitle的可观察对象,则会将其复制到instruction.config.title。然后,这将由Durandal(使用订阅)绑定到实际的document.title,这样只要documentTitle可观察值的值发生变化,document.title就会发生变化。 documentTitle可观察量可以是普通的可观察量或可计算的可观察量。

此方法还将大部分工作委托给实际的router.updateDocumentTitle()方法,方法是拦截并修改基于instruction的{​​{1}}值,然后调用instance

这适用于Durandal 2.1.0。