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