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 を設定することについて何かを見つけましたtitle。title文字列よりも。

durandal が document.title を変更するために使用するメソッドや、移動時に document.title を変更する他の方法をオーバーライドする方法はありますか?

4

2 に答える 2

4

Durandal.js 2.0 Set document title within activate method で説明されている手順に従うことができます。

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.ondocument.title を変更するなど、イベントの設定を検討してください。router.activeInstruction()config オブジェクトへのアクセスを提供します。誰かがビューモデルを切り替えるたびにイベントをトリガーします。

于 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 に答える