javascript - jsViews/jsRender 与模板内的丰富表达式

Question

简单问题:我正在使用 jsViews 来呈现 HTML 模板。我想要某种翻译。现在我的应用程序返回全局变量“语言”，其值等于:pl || zh || 德。

如何使用全局变量“语言”来减少负责翻译的 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

那么如何在 {{if}} 或 {{props}} 或 {{for}} 中使用这个表达式？ ??

提前谢谢您!!

Answer 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"}});

现在，如果您更改输入中的语言， Prop 显示将切换为新语言。