我制作了一个片段来展示我面临的问题:
<html>
<head>
<title>Demo 1 JsViews</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
</head>
<body>
<script id="template" type="text/x-jsrender">
<p>{{:property}}</p>
{^{on ~root.testFunction}}PUSH ME!{{/on}}
{{for nestedObjects}}
{{include #data tmpl="#template-2"/}}
{{/for}}
</script>
<div id="container"></div>
<script id="template-2" type="text/x-jsrender">
<p>{{:~root.property}}</p>
{^{on ~root.testFunction}}PUSH ME!{{/on}}
</script>
<div id="container-2"></div>
<script>
data = {
property : "PARENT",
testFunction : function(){ alert(this.property); },
nestedObjects : [
{
id: 0,
property: "CHILD1",
testFunction : function(){ alert(this.property);}
},
{
id: 1,
property: "CHILD2",
testFunction : function(){ alert(this.property);}
}]
};
/**
* Funciones
*/
$(document).ready(function(){
var tmpl = $.templates("#template");
tmpl.link("#container", data);
});
</script>
</body>
</html>
正如您所看到的,在'#template-2'中,它从主数据对象中获取属性,而不是从每个 nestedObjects '项中获取属性。我知道这将是正常行为。
有没有办法让include标记来获取每个 nestedObjects '项而不是整个数据对象作为上下文?
我知道如果我删除'#template-2'中的'~root'修饰符,它将按预期工作,但我需要它与<如果可能的话,强>'~root' modififer。
提前致谢:)
答案 0 :(得分:0)
在尝试了很多东西之后,我设法使用帮助对象以另一种方式使用它,如果有人有类似问题,请随时与我联系:)。
答案 1 :(得分:0)
[['a1', 'abc', 'def'], ['a5', 'abc', 'xyz'], ['a3', '1', '2'], ['a2', '4', '2', '3']]
是一个内置帮助器,指向您传递给~root
或link()
方法的顶级数据。看到
http://www.jsviews.com/#contextualparams@root
所以你不能改变它让它指向其他地方。但是您可以创建自己的帮助程序(不使用保留的render()
名称),例如:
root
并在模板-2中写
{{include #data ~myroot=#data tmpl="#template-2"/}}