Question

我正在使用当前最新的jsRender（截至12/02/2013），我正在尝试组合模板，以便我可以渲染嵌套对象模型。

我希望能够;

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>

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

[更新] 好的，所以再搜索几页，看起来你可以这样做：JsRender: How to pass variables into a nested template但我仍然希望在可能的情况下看到这些其他选项;的 [/更新]

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")}}

任何人都有线索，或者（鲍里斯）可能有什么东西可以进入下一版本吗？

Answer 1

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

Answer 2

所以这就是我如何使用递归模板解决问题的第一部分。这根据传递的参数设置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>

嵌入不带{{for}}的jsRender模板或组合内联+块模板

2 个答案: