2015-09-06 84 views
0

快速的問題:我使用jsViews渲染HTML模板。我想要進行某種翻譯。現在我的應用程序將返回全局變量「語言」用值等於:PL || en || dejsViews/jsRender VS內模板豐富的表情

如何使用全局變量「語言」來減少負責翻譯的JSON中的數據?

1)。 JSON數據

var language = [ 
    { 
    "pl": { 
      "prop": "value", 
      "prop": "value" 
    }, 
    "en": { 
      "prop": "value", 
      "prop": "value" 
    }, 
    "de": { 
      "prop": "value", 
      "prop": "value" 
    } 
    } 
]; 

2)。工作HTML模板,但語言值是靜態寫入

<script type="text/x-jsrender" id="test"> 
    <div> 
     {{props pl}} 
     <span> 
      {{>prop}} 
     </span> 
     {{/props}} 
    </div> 
</script> 

3)。我想將{{props pl}}更改爲{{props * language}}之類的內容,以便在模板中動態獲取語言,但是如何正確書寫它?

我知道:

a). $.views.settings.allowCode= true;   
    b). {{*:language}} will return language shortcode 

所以裏面怎麼使用這種表達{{如果}}或{{道具}}或{{爲}}?

預先感謝您!

回答

1

使用allowCode = true最適合需要包含無法以聲明方式實現的操作的代碼的情況。

你可以混合代碼和標籤定期所示,這裏的例子:http://www.jsviews.com/#allowcodetag;

但避免allowCode會提供更好的可維護性和代碼的分離。

如果在這種情況下,如果您只想訪問全局變量,您可以簡單地將它們傳遞或聲明爲幫助器:http://www.jsviews.com/#helpers

例如,你可以這樣做:

<input data-link="~options.language" /> 

<div> 
    {^{props words[~options.language]}} 
    <span> 
     {{>prop}} 
    </span> 
    {{/props}} 
</div> 

var data = { 
    words: { 
    en: { 
     prop: "value", 
     prop: "value" 
    }, 
    de: { 
     ... 
    }}; 

$.templates("#test").link('#container', data, {options: {language: "en"}}); 

現在,如果你在輸入更改語言,道具顯示器將切換到新的語言。