使用 JS Render 比较查询字符串字段以显示 JSON

Question

我有一个有效的 JS 渲染模板，它根据查询字符串的值引入不同的 JSON 文件。我试图找出如何根据查询字符串字段 "source" 更改 JS 渲染元素 (id_1) 的值。

所以如果我的 url 以“?market=ab&source=index”结尾，我想要 "{{:id_1}}" 显示 ab.JSON 文件中的 "index_id_1"。

HTML

<script type="text/x-jsrender" id="logoTempl">
<div id="cta-div">
    <a href="{{:id_1}}">Button</a>
</div>
</script>
<div class="mainContainer">
</div>

JSON

[{"assets" : {
        "field1" : "value",
        "field2" : "value"
    },
    "ids" : {
        "index": {
            "id_1": "index_id_1",
            "id_2": "index_id_2",
            "id_3": "index_id_3"
        },
            "email": {
                "id_1": "email_id_1",
                "id_2": "email_id_2",
                "id_3": "email_id_3"
            }
        }
    }
]

JS

if (market == 'ab' && source == 'index') {
    $.getJSON('data/ab.json', function(data) {
      var logoField = logo.render(data);
      var id1 = data[0].ids.index.id_1
        $(".mainContainer").html(logoField);
        $("{{:id_1}}").html(id1);
    })
}

Answer 1

如果我理解正确的话，您希望模板显示值 ids[source].id_1。

你可以传入source作为助手，例如

...logo.render(data, {idgroup: source});

然后在模板中，写：

{{:ids[~idgroup].id_1}}

或者您可以创建一个 getId 辅助函数，例如：

...logo.render(data, {getId: function(index) {
  return data[index].ids[source];
}});

然后在模板中，写：

{{:~getId(#index).id_1}}

使用 JS Render 比较查询字符串字段以显示 JSON

Comparing query string fields to display JSON using JS Render

html

javascript

jsrender