JsViews'包含标记的数据上下文

时间:2018-04-18 08:54:32

标签: javascript templates jsviews

我制作了一个片段来展示我面临的问题:

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

提前致谢:)

2 个答案:

答案 0 :(得分:0)

在尝试了很多东西之后,我设法使用帮助对象以另一种方式使用它,如果有人有类似问题,请随时与我联系:)。

答案 1 :(得分:0)

[['a1', 'abc', 'def'], ['a5', 'abc', 'xyz'], ['a3', '1', '2'], ['a2', '4', '2', '3']] 是一个内置帮助器,指向您传递给~rootlink()方法的顶级数据。看到 http://www.jsviews.com/#contextualparams@root

所以你不能改变它让它指向其他地方。但是您可以创建自己的帮助程序(不使用保留的render()名称),例如:

root

并在模板-2中写

{{include #data ~myroot=#data tmpl="#template-2"/}}