Question

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

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

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

Answer 1

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

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

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

当您将模板嵌入HTML页面时，将使用模板的<script>包装器。这样做是为了使浏览器不会尝试将您的模板解释为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>，最终处理的模板只会是简单的{{1} }}。例如：http://jsfiddle.net/ambiguous/dzPzC/

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

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

<script>

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

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

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

很好，编译后的模板函数只是想看一个JavaScript对象。人们谈论传递JSON并经常使用tmpl({ title: '...' })方法为模板准备数据，但这是滥用术语;模板确实需要一个对象，而JSON在技术上是一个字符串。

具有主干样板的下划线模板，正确的执行方式，或者是否有更好的模板方法

1 个答案: