以下是#parent.data
有效且第一个标题可以更改的示例。但是当#parent.data
替换为~root
时,test2
标记不会呈现。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jsrender.js" type="text/javascript"></script>
<script src="js/jquery.observable.js" type="text/javascript"></script>
<script src="js/jquery.views.js" type="text/javascript"></script>
<script id="test1Template" type="text/x-jsrender">
<div>{^{>title}}{{:content}}</div>
{{test2}}
<h1>{^{>#parent.data.title}}</h1>
{{/test2}}
</script>
<script id="myTemplate" type="text/x-jsrender">
{^{test1 title='Test Title 1'}}
{^{test1 title='Test Title 2'}}
{{/test1}}
{{/test1}}
</script>
<script type="text/javascript">
$.views.tags({
test1: function () {
this.tagCtx.props.content = this.tagCtx.render();
return $.templates.test1.render(this.tagCtx.props, undefined, this.tagCtx.view);
},
test2: function () {
return this.tagCtx.render();
}
});
$.templates({myTemplate: "#myTemplate",
test1: "#test1Template"
});
$(function () {
$.link.myTemplate('#container', {});
$('#editTitle').click(function () {
$.observable($.view('#container > div:first').data).setProperty('title', prompt());
});
});
</script>
</head>
<body>
<span id="editTitle">EditTitle</span>
<div id="container"></div>
</body>
</html>
答案 0 :(得分:2)
~root
是对您最初传入的数据对象或数组的引用 - 顶级数据。它不是直接的父数据。在您的情况下,root将是您通过{}
调用传入的link.myTemplate()
。
稍后添加更新:(回复下面关于~root的评论中的问题)
从JsViews的角度来看,当呈现任何块标记内容时,它也是一个“视图” - 其中模板是针对数据呈现的。视图构成一个层次结构,顶层视图构成一个数据公开的结构为~root。因此,如果您想为中间级别的数据提供特殊的快捷别名,您可以这样做,但这是您要做的。声明性地在this example中完成。在您的情况下,您以编程方式调用中级模板渲染,因此您可以通过提供引用作为上下文变量来执行等效操作:
return $.templates.test1.render(
this.tagCtx.props,
{mydata: this.tagCtx.props},
this.tagCtx.view);
现在你可以写
了<script id="test1Template" type="text/x-jsrender">
<div>{^{>title}}{{:content}}</div>
{{test2}}
<h1>{^{>~mydata.title}}</h1>
{{/test2}}
</script>