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

问题描述

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>

解决方法

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

请阅读文档：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>

javascript jsrender jsviews