Question

我试图用纯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]。

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

Answer 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

在jsRender中包裹模板

1 个答案: