3

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

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

我的问题是为什么这不起作用，我认为这是因为我没有将其更改为 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，但除非我做错了什么，否则这似乎不起作用。下划线是最好用的东西吗？我假设它是一个主干依赖项。或者我应该使用别的东西。我只是想避免在我的 JS 中编写 HTML。

4

1 回答 1

4

如果我理解正确，您最终会得到这个 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>，浏览器不知道如何处理 a<script type="text/x-underscore-template">所以<span>你感兴趣的根本不会被渲染。

您根本不需要<script>包装器，仅当您在某些 HTML 中嵌入原始模板时才需要包装器。您的模板只需要您的内容<script>：

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

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

您传递给模板函数的参数：

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

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

于 2012-06-13T17:50:49.003 回答