Question

快速提问：我正在使用jsViews呈现HTML模板。我想要一些翻译。现在我的应用程序返回全局变量＆＃34;语言＆＃34; ，其值等于： pl || en ||的德即可。

如何使用全局变量＆＃34;语言＆＃34;减少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"}});

现在，如果您更改输入中的语言，则道具显示将切换到新语言。

jsViews / jsRender vs模板内的富表达式

1 个答案: