在 jsRender 中环绕模板答案

【问题标题】：Wrap around template in jsRender在 jsRender 中环绕模板
【发布时间】：2013-09-04 22:29:12
【问题描述】：

我正在尝试用纯 HTML 包装我的模板。或者在代码中：

{{expandable}}
     CONTENT
{{/expandable}}

应该变成：

<div class="expandable closed">
  <div class="header lowercase">
    <img src="/Control/Svg?picture=EdgeBracket_Right" style="height: 35px; position: relative; top: 10px;"/>
  </div> 
  <div class="content">
    CONTENT
  </div>
</div>

到目前为止我尝试过的事情：
自定义标签方法

$.views.tags("expandable", function() {
    return '<div class="expandable closed"><div class="header lowercase"><img src="/Control/Svg?picture=EdgeBracket_Right" style="height: 35px; position: relative; top: 10px;"/>' +
    '</div> <div class="content">' + this.tagCtx.render(content) + '</div></div>';
});

但在CONTENT 内部我无法访问我的数据。 [或者至少不是我习惯的方式。]

模板方法
我考虑了这个例子，它在技术上更接近我的需要：

{{boldp title /}}

...

$.views.tags("boldp", {
  template: "<p><strong>{{:~tag.tagCtx.args[0]}}</strong></p>"
});

但如果我想环绕某些东西，我不知道该写什么而不是 ~tag.tagCtx.args[0]。

哪种方法更接近我的需要？我该如何解决剩下的问题？

【问题讨论】：

顺便说一句，这个问题对 JsViews 来说也很有趣。您可能也想添加该标签...？

标签： javascript templating jsrender jsviews

【解决方案1】：

您应该能够做到：

$.views.tags("expandable", function() {
  return '<div class="expandable closed">\
    <div class="header lowercase">\
      <img src="/Control/Svg?picture=EdgeBracket_Right" style="height: 35px; position: relative; top: 10px;"/>\
    </div> \
    <div class="content">' +
      this.tagCtx.render()
  + '</div>\
  </div>';
});

或者：

$.views.tags("expandable", {
    template: 
        '<div class="expandable closed">\
          <div class="header lowercase">\
            <img src="samples/data-link/question.jpg" style="height: 35px; position: relative; top: 10px;"/>\
          </div> \
          <div class="content">\
            {{include tmpl=#content||~tag.tagCtx.props.template/}}\
          </div>\
        </div>'
  });

那么如果你放的内容如：

  {^{expandable}}
    {^{for members}}
      <div data-link="name"></div>
    {{/for}}
  {{/expandable}}

（我在这里假设 JsViews，但如果你只是使用 JsRender 你可以写：

  {{expandable}}
    {{for members}}
      <div>{{:name}}</div>
    {{/for}}
  {{/expandable}}

对于非数据链接的等效项）

内容应正确访问数据，如{^{for members}}

您也应该能够做到（对于使用函数定义的第一个版本）

  {^{expandable tmpl='externalTemplate'/}}

或者对于第二个 - 基于模板 - 版本：

  {^{expandable template='externalTemplate'/}}

这里有一个相关问题：https://github.com/BorisMoore/jsviews/issues/218

【讨论】：