backbone.js - 带有 Backbone 样板的下划线模板，正确的做法，或者是否有更好的模板方法

Question

好吧，我正在玩弄 Backbone、node.js、Underscore、Backbone Boilerplate，所以我有足够的知识。一直在问疯狂的问题，因为我仍然无法完全理解它。我目前正在尝试使用 Underscore图书馆 Backbone Boilerplate制作一个非常简单的模板，允许我传递数据；然后在更新模型时，更改将更改模板的 View 。我相信这是正确的做法，而不是在我的 JS 文件中编写 HTML 代码？如果我错了，请阻止我。

Backbone Boilerplate 有它的模板 .fetch()我理解的系统。但是，我相信这意味着在我的 JS 中编写 HTML。所以我想使用 Underscore 简单地将信息从模型传递到 View ，再传递到模块以再次渲染模板(或者我可以完全跳过 View ？)。

我的问题是为什么这行不通，我认为这是因为我没有将其更改为 JSON。

我的 HTML 模板:

<div>
    <script id="rtemp" type="text/x-underscore-template">
        <span><%= title %></span>
    </script>​
</div>

和 JavaScript:

define([
  // Global application context.
  "app",

  // Third-party libraries.
  "backbone",
  "underscore",
  "json2"
],

function(app, Backbone) {
  var Attempt = app.module();

  Attempt.Model = Backbone.Model.extend({});
  Attempt.Collection = Backbone.Model.extend({});

  Attempt.Views.Tutorial = Backbone.View.extend ({
    template: "app/templates/attempt",
    render: function(done) {
      var tmpl = app.fetchTemplate(this.template);
      //console.info(tmpl);
      this.$el.html(tmpl({title: 'This is a title'}))
    }
  });

  return Attempt;
});

当我检查它显示在 <div> 中的元素时但是它周围仍然有模板脚本标记，因此不会显示在 HTML 页面上。我尝试使用 json2首先将其转换为 JSON，但这似乎不起作用，除非我做错了什么。 Underscore 是最好用的东西吗？我假设是因为它是 Backbone 依赖项。或者我应该使用其他东西。我只是想避免在我的 JS 中编写 HTML。

Answer 1

如果我没理解错的话，你最终会得到这个 HTML:

<div>
    <script id="rtemp" type="text/x-underscore-template">
        <span>This is a title</span>
    </script>​
</div>

根据您正在使用的代码，这是正确的行为，但这显然不是您想要的结果。

<script>当您将模板嵌入 HTML 页面时，将使用模板包装器。这样做是为了让浏览器不会尝试将您的模板解释为 HTML，并防止浏览器尝试自行呈现它。在这种情况下，您可以像这样将模板嵌入到 HTML 页面中:

<!-- Some HTML stuff... -->
<script id="rtemp" type="text/x-underscore-template">
    <span><%= title %></span>
</script>​
<!-- Some other HTML stuff... -->

你会像这样使用它:

var t    = _.template($('#rtemp').html());
var html = t(...)

$('#rtemp').html()部分仅提取模板的 <script> 的内容包装所以_.template只会看到 <span><%= title %></span>最终处理的模板只是一个简单的 <span> .例如:http://jsfiddle.net/ambiguous/dzPzC/

在您的情况下，您正在阅读整个 <div><script>...</script></div>作为模板并将其提供给_.template .结果是 tmpl({title: 'This is a title'})仍然包括 <script> ，浏览器不知道如何处理 <script type="text/x-underscore-template">所以 <span>您感兴趣的内容根本不会呈现。

您不需要 <script>包装器，只有在将原始模板嵌入到某些 HTML 中时才需要。您的模板只需要 <script> 的内容:

<span><%= title %></span>

演示:http://jsfiddle.net/ambiguous/QuwSX/

传递给模板函数的参数:

tmpl({ title: '...' })

很好，编译后的模板函数只是想看到一个 JavaScript 对象。人们谈论将其传递给 JSON 并经常使用 toJSON为模板准备数据的方法，但这是对术语的滥用；模板确实需要一个对象，而从技术上讲，JSON 是一个字符串。