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

【问题标题】：Embedding a jsRender template without {{for}} or combining inline + block templates嵌入不带 {{for}} 的 jsRender 模板或组合内联 + 块模板
【发布时间】：2013-02-12 22:31:23
【问题描述】：

我正在使用当前最新的 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: 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")}}

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

【问题讨论】：

对于第一部分，您可以轻松做到这一点。树标记控件示例说明了对标记的递归调用。您也可以递归调用，并传递不同的参数。对于第二部分，是的，有一个关联模板的功能，然后让模板调用（包装）块内容。它将在下一次更新中，然后我会给你一个演示......
谢谢鲍里斯。您是否打算允许模板包含文字和链接模板，或者只是可以嵌入文字内容中的 {{tmpl=}} 样式库调用？后一种方法对我来说似乎更清楚。
嗨 cirrus - 不确定我是否完全理解你的替代风格。但最好的办法是，如果您可以查看我在下面的答案中提到的新 JsRender 功能（以及使用它的链接示例），看看它是否适用于您的场景......

标签： jsrender

【解决方案1】：

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

【讨论】：

是的，看起来不错。我看到您可以选择文字内容出现的位置，有点像传递参数。那么#content 是保留的模板名称吗？可以传递其他参数来包含方法吗？
#content 是视图对象的内容属性：view.content。 #foo 是 view.foo 的缩写。您注意到它不是字符串“#content” - 因此与由字符串名称引用的命名模板没有冲突。
传递参数可以写成 {{include ~myparam=expr tmpl=.../}} 然后在包含的内容中访问~param，例如如果您使用的是 tmpl=#content，则包装块。所以你可能有 {{wrapper}}{{:~myparam}}{{/wrapper}}，其中 wrapper 标记将 myparam 作为 {{include .../}} 上的参数传递给其包装的内容

【解决方案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>

【讨论】：