durandal - Durandal.js 2.0在Activate方法中设置文档标题

Question

在我的 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    
}

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

Answer 1

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

标题总是在导航完成后设置，因此之前已调用过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参数中，您具有要激活的ViewModel，因此可能的解决方案是重写 updateDocumentTilte或 shell.js中的 main.js函数，并使用 instance获取所需的值。例如，您可以执行以下操作(确保您拥有 app和 router实例):

 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，如果包含，则获取调用该函数的标题。然后，在我们的 View 模型中，我们可以像下面这样:

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;
});

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