如何在 jsRender 中引用 json 对象 属性?
How can I reference a json object property in jsRender?
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>
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>