Durandal.js 2.0在Activate方法中设置文档标题 [英] Durandal.js 2.0 Set document title within activate method

问题描述

在外壳中，我已经按照以下方式设置了路线：

In my shell, I have set up my routes like so:

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    
}

对于位置页面，文档标题设置为位置| [我的应用名称]。我想将其更改为由位置页面的Activate方法上的activate方法（paramX，paramY）中采用的参数组成。我该怎么做？

For the location page, the document title is set to the Location | [Name of my app]. I would like to change this to be made up from the params taken in the activate method (paramX, paramY) on my activate method for the location page. How do I do this?

推荐答案

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

You can achieve this by overriding the default behaviour of the process of the router to set the title.

标题始终在导航完成后设置，因此之前已调用过viewmodel的activate方法。 Durandal 2.0中的当前实现是：

The title is always set after the navigation is complete so the activate method of your viewmodel has been called before. The current implementation in Durandal 2.0 is:

   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 。

在实例中将您具有要激活的ViewModel，因此可能的解决方案是覆盖 shell.js 或<中的 updateDocumentTilte 函数code> main.js 并使用 instance 来获取所需的值。例如，您可以执行以下操作（确保您具有 app 和 router 实例）：

In instance param you have the ViewModel that you are activating so a possible solution could be to override the updateDocumentTilte function in shell.js or main.js and use the instance to get the values that you want. For example you could do something like this (make sure you have the app and the router instance):

 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 ，如果确实存在，我们将获得调用该函数的标题。然后在我们的视图模型中，我们可以像这样：

In this code we check if the instance (the current ViewModel) contains a method setTitle, if it does then we get the title calling the function. Then in our viewmodel we can have something like:

define(function () {

var id;
var vm = {
    activate: function (param) {
        id = param;
        return true;
    },
    setTitle: function () {
        return 'My new Title ' + id;  //Or whatever you want to return
    }
};

return vm;
});

如果您的视图模型不包含此方法，那么它应该属于当前行为。

If your viewmodel does not contain this method, then it should fall to the current behaviour.

这篇关于Durandal.js 2.0在Activate方法中设置文档标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！