3

これが私のシナリオです。

ページの翻訳を処理するための別の KnockoutJS バインディング プロバイダーを作成したいと考えています。このプロバイダーは、ページの読み込み時にdata-alias存在するか、ページの読み込み後に作成された (おそらくノックアウトによってレンダリングされたサブテンプレートで作成された) 要素の属性を読み取り、翻訳を取得します。エイリアスに適用し、要素のテキストとして適用します。ko.applyBindings(model, element);ページのdata-bind属性を処理するために個別に呼び出すことができるようにしたいのですがko.applyBindings、属性に翻訳を適用できるように別の呼び出しを行いたいと考えていdata-aliasます。両方をサポートし、独立して動作させる方法を知っている人はいますか?

プロセスの進め方の例を次に示します。

HTML マークアップ/テンプレート:

<fieldset>
    <legend data-alias="SomeTitle"></legend>
    <div class="row-container">
        <div class="control-group">
            <label class="control-label" data-alias="LabelAlias"></label>
            <div class="controls">
                <input type="text" data-bind="value: SomeObservable" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" data-alias="AnotherLabelAlias"></label>
            <div class="controls">
                <input type="text" data-bind="value: AnotherObservable" />
            </div>
        </div>
    </div>
</fieldset>

ページの読み込み時に、data-alias のバインディング プロバイダーを使用してバインディングを適用するための呼び出しがあります。

<script type="text/javascript">
    $(function() {
        // Lets assume translations is a dictionary of alias to translation
        // that is loaded with the page synchronously
        ko.applyBindings(translations); 
    });
</script>

また、ページの読み込み時に、ページに必要なデータを取得するためのサービス呼び出しがあり、取得時にデータにバインディングが適用されます。

<script type="text/javascript">
    $(function() {
        $.ajax({...}) // Omitted for brevity
            .done(function(data) {
                var viewModel = new my.namespace.SomeViewModel(data);
                ko.applyBindings(viewModel);
            });
    });
</script>

意図した効果:

  • ページが読み込まれます。
  • 翻訳が適用されます。
  • データを取得するためにサービス コールが開始されます。
  • サービスコールが返ります。
  • データはビュー モデルに変換され、ページにバインドされます (翻訳は保持されます)。
4

1 に答える 1

0

サービスコールから返されるデータにはノックアウトを使用します。

ただし、翻訳にノックアウトを使用しないでください。そこでやりたいことは、ノックアウトのようなフレームワークなしで処理できます。これがあなたがそれをすることができる方法です：

var translations = {};
translations["LabelAlias"] = "Bonjour";
translations["AnotherLabelAlias"] = "Au Revoir";

$("[data-alias]").each(function(index, element){
    var aliasName = element.getAttribute("data-alias");
    var aliasValue = translations[aliasName];
    $(element).text(aliasValue);
});    ​

これが実用的なフィドルです：http：//jsfiddle.net/qjGwR/

更新 翻訳したいコンテンツを動的にロードしたとのことですが。問題ない！フィドルを更新しました-http ://jsfiddle.net/qjGwR/1/。

function translate(translations, selector) {
  if (selector == null) { selector = ''; }
  $(selector + " [data-alias]").each(function(index, element){
    var aliasName = element.getAttribute("data-alias");
    var aliasValue = translations[aliasName];
    $(element).text(aliasValue);
  });
}

translate(helloTranslations);

// Add something to the DOM
var moreContent = '<label class="control-label" data-alias="ThirdLabelAlias">Three</label><div class="controls"><input type="text" data-bind="value: somethingElse" /></div>'

$('#moreContent').html(moreContent);
translate(helloTranslations, '#moreContent');​

翻訳アクトをメソッドに移動し、適用する翻訳を渡し、DOMのどの部分を翻訳するかを指示します。

于 2012-12-07T15:40:24.190 に答える