1

下面是#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>
4

1 回答 1

2

~root是对您最初传入的数据对象或数组的引用 - 顶级数据。它不是直接父数据。在您的情况下， ~root 将是{}您通过link.myTemplate()调用传入的。

稍后添加更新：（对下面关于 ~root 的评论中的问题的回应）

从 JsViews 的角度来看，当呈现任何块标记内容时，它也是一个“视图”——在其中针对数据呈现模板。这些视图构成了一个层次结构，而顶层是数据作为 ~root 公开的层次结构。因此，如果您想为中间级别的数据提供特殊的快捷别名，您可以这样做，但那是您自己做的。声明式地执行此示例中的操作。在您的情况下，您正在以编程方式调用中间级别的模板渲染，因此您可以通过提供引用作为上下文变量来执行等效操作：

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>
于 2013-04-26T21:20:30.297 回答