Question

在Backbone app 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 app尝试这种技术，但是当我创建模板文件时，我遇到的问题是它不是严格的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>

Answer 1

有关您想要完成的内容的详细信息，请参阅此链接Underscore Template。

但总的来说，如果您只想插入this.model.get('someAttr');，那么您需要做的只是将其包含在模板中。

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

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

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

Backbone：在模板中混合html和javascript

1 个答案: