1

我正在本地化我的 durandal 应用程序。我已经选择了一种方法——我在我的所有页面中共享一个模块，其中包含任何视图可能具有的所有字符串。

在我的外壳中，我正在定义

router.map([
    { route: ['', 'search'], title: i18n.search, moduleId: 'viewmodels/search/index', nav: true },
    { route: "employees", title: i18n.employeesList, moduleId: "viewmodels/employees/index", nav: false },
    { route: "details/:id", title: i18n.details, moduleId: "viewmodels/details/index", nav: false }
    // ...
]);

其中i18n属性是 ko.observables 包含字符串，如

i18n = {
    search: ko.observable("search"),
    employeesList: ko.observable("employeesList"),
    details: ko.observable("Details")
}

这可以很好地打印我的导航栏

<ul class = "nav navbar-nav" data-bind = "foreach: router.navigationModel">
    <li data-bind = "css: { active: isActive }">
        <a data-bind = "attr: { href: hash }, text: title"></a>
    </li>
</ul>

但是，在更改文档标题时，它不起作用。

在这里，我发现了一些关于 durandal 设置 document.title 的内容，不幸的是，答案表明要更改标题 durandal 会创建一些其他属性（这似乎基于我的title模块对象声明属性）并且可能不认为title可能是其他的比字符串。

有没有办法覆盖 durandal 用来更改 document.title 的某些方法，或者在导航时使其更改 document.title 的任何其他方法？

4

2 回答 2

4

您可以按照Durandal.js 2.0 在 activate 方法中设置文档标题中概述的步骤进行操作。

您需要router.updateDocumentTitle在 main.js|shell.js 中覆盖，以便它考虑到这config.title是一个可观察的。

以下内容应该可以帮助您入门。

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

更新：基于评论。

除了上面的修改，如果标题应该立即更改，那么还需要做更多的工作。

原因是路由器不知道语言切换。Pub/sub 很可能是实现的正确方式。考虑设置一个事件，例如使用app.on更改 document.title 的事件。router.activeInstruction()将提供对配置对象的访问。每当有人在任何视图模型中切换时触发事件。

于 2013-10-16T12:37:56.637 回答
2

这可能来得有点晚，但我也想添加我的解决方案 :-) 我正在使用可观察对象，它可以根据需要更改变量的文本。像这样设置路线及其选项时：

var routes = [{ route: '', title: 'Welcome', moduleId: 'viewmodels/welcome', nav: true, title: 
    ko.computed(function () { return activeTranslation.welcome() }) 
}];

我的 activeTranslation 看起来像这样：

var activeTranslation = {
    welcome: ko.observable()
}

现在，当更改语言时，我只需遍历包含相同变量及其各自翻译的语言对象，并将它们应用于可观察对象。

var dutch = { welcome: "Welkom" };

function loadLanguage (lang) {
    for (var key in languages[lang]) {
        activeTranslation[key](languages[lang][key]);
    }
}
于 2014-06-06T15:48:09.207 回答