0

在这个 Backbone 应用程序http://arturadib.com/hello-backbonejs/docs/5.html的“hello world”示例中，作者像这样内联呈现模板

render: function(){
      $(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
      return this; // for chainable calls, like .render().el
    },

这虽然是功能性的，但有点难以管理的 html 连接。

我见过其他 Backbone 应用程序的作者使用下划线的模板功能在视图中设置模板

template: _.template($('#my-template').html()),

然后渲染它而不是html

$(this.el).html(this.template(this.model.toJSON()));

我想在 hello world 应用程序中尝试这种技术，但是当我创建模板文件时，我遇到了它不是严格意义上的 html 的问题。你会注意到它调用函数

 this.model.get('part2')

我用作模型的模板（来自另一位作者的应用程序，见下文）仅包含 html。

问题，我需要做什么才能在同一个模板文件中包含 javascript 和 html，以便调用模型？

<script type="text/template" id="item-template">
      <div class="company">
        <div class="display">
          <span class="company-text"></span>
          <span class="company-mood">
            <span class="mood"></span>
          </span>
          <span class="company-destroy"></span>
        </div>
        <div class="edit">
          <input class="company-input" type="text" value="" />
        </div>
      </div>
    </script>
4

1 回答 1

2

有关您想要完成的内容的详细信息，请参阅此链接下划线模板。

但总的来说，如果您只想插入您this.model.get('someAttr');需要做的所有事情，只需将其包含在您的模板中即可。

// Since you call it like this:
$(this.el).html(this.template(this.model.toJSON()));

// Just include this
<div>
    <%= someAttr %>
</div>

您基本上是传入模型属性对象，而下划线模板只是插入该对象的属性。你可以传入任何你想要的东西，尽管你对渲染调用所做的可能是最常见的。

于 2012-09-20T02:32:46.460 回答