jsView - 与#parent.data 相比，~root 在这种情况下不起作用答案

【问题标题】：jsView - In contrast to #parent.data, ~root does not work in this casejsView - 与#parent.data 相比，~root 在这种情况下不起作用
【发布时间】：2013-04-26 14:10:33
【问题描述】：

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

【问题讨论】：

标签： jsviews

【解决方案1】：

~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>

【讨论】：

我认为~root 是模板的根。是否有计划指定一个变量，该变量是模板渲染的根数据。需要明确的是，我想访问模板呈现的数据。这里是this.tagCtx.props。我希望它与每个模板成比例，并且我想避免 parent 引用我犯了错误的地方。例如选择#parent.parent.data 或#parent.parent.parent.data。我在我的模板中多次使用这种根数据。谢谢。
再次感谢。除了您的解决方案之外，我还尝试将我的模板包装在 {{include ~mydata=#data}} 标记中并且它可以工作。但是您的解决方案更清洁。