0

我正在使用当前最新的 jsRender（截至 2013 年 2 月 12 日），并且我正在尝试将模板组件化，以便渲染嵌套对象模型。

我希望能够；

1. 将参数传递给我的模板函数，以便我可以使用不同的参数递归调用它；

    <script id="tmplQ" myParam="int?" type="text/x-jquery-tmpl">
        <div class="rgRow L{:*myParam*} e">  // wrap this in L2/L3/L4 etc depending on myParam
            <div class="td q">{{:q}}</div>
        </div>
        {{for cq templ="#tmlQ(myParam+1)"}}  // increment parameter for recursing
    <script>

所以基本上，我想以 0 开头的 myParam 传递，然后模板在向下钻取嵌套的 json 对象模型时调用自身。

[更新]好的，所以再搜索几页，看起来你可以这样做：JsRender：如何将变量传递到嵌套模板中，但我仍然很想在可能的情况下看到这些其他选项；[/更新]

2. 或者失败了，我一直试图简单地将块模板的一部分包含在另一个内联模板中；

    {{for cq tmpl="#tmplQ"}}         // renders inline template but nothing else
          <div class="rgRow L2 e">         // needed to wrap this in L2
          {{for cq tmpl="#tmplQ"}}     // can't mix inline/block templates
              <div class="rgRow L3 e"> // wanted to wrap this in L3
                  {{for cq tmpl="#tmplQ"/}}  // would work if it got here
              </div>
          {{/for}}
        </div>
    {{/for}}

使用更简单的库模板；

<script id="tmplQ" type="text/x-jquery-tmpl">
    <div class="td q">{{:q}}</div>
</script>

问题是，jsRender 似乎不支持混合内联和块样式。一旦你放入它tmpl=，{{for}}它就会忽略嵌套在它下面的所有其他内容。这是一种耻辱。我希望看到它支持两者的混合。它甚至不会引发错误。

我也试图找到这样的语法来简单地调用模板内联。它存在吗？

    {{for cq tmpl="#tmplQ"}}         // renders inline template but nothing else
          <div class="rgRow L2 e">   // wrap in L2
          {{for cq}}
              {{call tmpl="#tmplQ"}}         // call library template????
              <span>other content</span>
          {{/for}}
        </div>
    {{/for}}

但它也不起作用。我也试过这些直接调用模板。

{{tmplQ()}}
{{tmpl("#tmplQ")}}

任何人都有线索，或者（鲍里斯）可能会进入下一个修订版？

4

2 回答 2

1

随着最新的 JsRender 更新，现在有一个新的“包装模板”功能，用于提供模板和块内容，以便模板可以“包装”内容。 有关示例，请参见http://borismoore.github.com/jsrender/demos/step-by-step/06_template-composition.html 。

于 2013-02-27T17:56:04.580 回答
0

所以这就是我如何使用递归模板解决问题的第一部分。这会根据传入的参数设置 L1、L2、L3 等；

<script id="tmplQ" type="text/x-jquery-tmpl">
    <div class="selected stmQ">
        {{for process.qs[0]}}
            {{for cq}}
                <a id="q-{{:stm.n}}">q-{{:stm.n}}</a>
                <div class="table">
                    {{for cq ~depth=1 tmpl="#tmplNestedQ"/}}
                </div>
            {{/for}}
        {{/for}}
    </div>
</script>

<script id="tmplNestedQ" type="text/x-jquery-tmpl">
    <div class="rgRow L{{:~depth}} e">
        <div class="td q">{{:q}}</div>
    </div>
    {{for cq ~depth=(~depth+1) tmpl="#tmplNestedQ"/}}
</script>
于 2013-02-12T22:52:02.473 回答