0

我正在尝试用纯 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]想包裹一些东西。

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

4

1 回答 1

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

于 2013-10-09T06:10:30.587 回答