如何在 jsRender 中引用 json 对象属性？答案

【问题标题】：How can I reference a json object property in jsRender?如何在 jsRender 中引用 json 对象属性？
【发布时间】：2020-12-03 11:45:16
【问题描述】：

JSRender/JSViews 模板引擎渲染 JSON 对象如下：

<div>{{:name}}</div>

这适用于像{"name":"Foo","age":"28"} 这样的对象。

但是如果我有一个person 对象（例如{"person":{"name":"Foo","age":"28"}}）呢？

我怎样才能渲染这样的东西？

<div id="template">{{:person.name}}</div>

下面是更多上下文的样子：

<div id="container"></div>
<script id="view-event-template" type="text/x-jsrender">
    <div id="template">{{:person.name}}</div>
</script>
<script id="view-event-template" type="text/javascript">
    $.ajax({
        ...
        success: function (data) {
            // returns json object like `{"person":{"name":"Foo","age":"28"}}`
            $("#container").html(
                $("#template").render(data)
            );
        }
    });
</script>

【问题讨论】：

也许现在删除这个问题是个好主意，因为它不是问题，所以对于其他想要了解 JsRender 中的渲染对象属性的人没有用...

标签： javascript jsrender jsviews

【解决方案1】：

你的例子没有错。你试过了吗？您可以访问嵌套属性。

请阅读文档：https://www.jsviews.com/#paths

const $template = $('#template');
const data = { "person": {"name": "Foo", "age": "28" } };

$('#output').html($template.render(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.0-beta/jsrender.min.js"></script>
<div id="output"></div>
<script id="template" type="text/x-jsrender">{{:person.name}}</script>

【讨论】：

哈，一定是我遗漏了什么。谢谢。我可以通过将数据呈现为数组来使其工作：$template.render([data])，然后将其引用为{{person[0].name}}。
@Ryan 您不应该将人包装在数组中。上面的示例适用于提供的数据。确保您传入的数据是正确的。