處理多個頁面級綁定提供程序

這是我的場景。處理多個頁面級綁定提供程序

我想創建一個單獨的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>

在頁面加載，會有用的數據別名綁定提供應用綁定的電話：

<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>

預期效果：

頁面加載。
應用翻譯。
服務呼叫被啓動以檢索數據。
服務調用返回。
數據轉換爲視圖模型並綁定到頁面（並保留翻譯）。

來源

2012-10-23 DanilF

對於當前的KO實例，您一次只能有一個綁定提供程序處於活動狀態。一個想法是創建一個綁定提供程序來封裝真正的綁定提供程序，但會暴露一個「模式」以確定要查找的內容。然後，您可以在進行翻譯綁定時設置此模式。 –

是的，那可能會奏效。當我有機會時，我會研究它。 – DanilF

因此，您的第一個頁面加載調用獲取翻譯綁定，然後第二個調用將獲得這些綁定的結果以獲取翻譯？ –

將淘汰賽用於從服務呼叫返回的數據。

但是不要使用基因敲除翻譯 - 你想做的事情可以在沒有敲除框架的情況下處理。這裏是你如何能做到這：

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-07 15:40:24 CodeThug

是的，我原本以爲去那條路。但是，該路線唯一的問題是，頁面加載時並不是所有頁面的DOM元素都會被創建。我們使用嵌套的，遞歸定義的模板，也可以在用戶加載頁面後進行修改。因此，儘管該路線可用於初始頁面加載，但加載後頁面上創建的所有DOM元素都不會被本地化。 – DanilF

查看更新以瞭解如何處理動態加載的內容。 – CodeThug

處理多個頁面級綁定提供程序

回答

相關問題