jsView-与#parent.data相比，〜root在这种情况下不起作用 [英] jsView - In contrast to #parent.data, ~root does not work in this case
问题描述
下面是#parent.data工作且可以更改第一个标题的示例.但是，当#parent.data替换为~root时，不会呈现test2标记.
Below is the example where #parent.data works and the first title can be changed. But when #parent.data is replaced with ~root, test2 tag is not rendered.
<!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>
推荐答案
~root是对您最初传入的数据对象或数组(顶级数据)的引用.它不是直接的父数据.在您的情况下，〜root将是您通过link.myTemplate()调用传入的{}.
~root is a reference to the data object or array you passed in initially - the top-level data. It is not the immediate parent data. In your case ~root will be the {} you passed in with the link.myTemplate() call.
稍后添加了更新:(对下面有关〜root的评论中的问题做出回应)
Update added later: (Response to question in comment below about ~root)
从JsViews的角度来看，当呈现任何块标签内容时，它也是一个视图"-根据数据呈现模板.视图构成一个层次结构，最顶层的视图是将数据作为〜root公开的视图.因此，如果您想为中间级别的数据提供特殊的快捷别名，则可以这样做，但这是您要做的.声明性地按照此示例.在您的情况下，您将以编程方式调用中间级模板渲染，因此您可以通过提供引用作为上下文变量来进行等效操作:
From JsViews point of view, when any block tag content is rendered, it is also a 'view' - where a template is rendered against data. The views make up a hierarchy, and the top-level one is the one for which the data is exposed as ~root. So if you want to provide special short cut aliases for data at intermediate levels, you can do so, but that is for you to do. Declaratively that is done as in this example. In your case you are calling the intermediate level template render programmatically, so you can do the equivalent by providing a reference as a context variable:
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>
这篇关于jsView-与#parent.data相比，〜root在这种情况下不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
