Question

我制作了两个文件，一个用于HTML，其中脚本定义为id ='search_template'，另一个javaScript文件是我提到的“视图”。

在View的渲染功能中，我使用

选择HTML文件中的脚本

ID = 'search_template'

使用jQuery并将其传递给jQuery的

.html（）

将其转换为String，然后将其传递给Underscores的

_.template（String）

但是，Underscore会抛出错误

未捕获的TypeError：无法调用null的替换方法

我相信jQuery无法将id ='search_template'的脚本转换为String。

SearchView = Backbone.View.extend({
      initialize: function(){
        _.bindAll(this, 'render');
      },
      render: function(){
        var template = _.template($("#search_template").html());
        $("body").html(template);
      }
    });
var search_view = new SearchView({ el: $("#search_container") });
    search_view.render();

我从render函数中删除了jQuery部分，并尝试通过显式传递HTML字符串而不使用.html（）函数： -

render: function(){
    var template = _.template("<label><%= search_label %></label> 
    <input type=\"text\" id=\"search_input\" /> 
    <input type=\"button\" id=\"search_button\" value=\"Search\" />");
    $("body").html(template);
}

这完全没问题。当我使用jQuery使用$（“search_template”）来获取脚本时，为什么它不起作用。此外，当我合并HTML和JavaScript文件时，它的工作原理。以下是HTML文件的摘录： -

<script type="text/template" id="search_template">
<label>Search here : </label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>

Answer 1

这render：

render: function(){
  var template = _.template($("#search_template").html());
  $("body").html(template);
}

无效，因为在调用DOM时，DOM中没有#search_template。如果你不相信我，这里有一些证据：http://jsfiddle.net/ambiguous/HFYyx/

你在某处有错字或序列问题：

如果您未在HTML中添加#search_template，请修复HTML。
如果您在render位于DOM之前运行#search_template，请将render调用放入$(function() { ... })包装器，直到它被调用为止DOM准备就绪。
如果您在id中输入拼写错误，请修正您的拼写错误。

这些将是导致问题的最常见原因。

顺便说一下，_.template返回一个函数（除非你也传递第二个参数）：

模板 _.template(templateString, [data], [settings])

将JavaScript模板编译为可以评估渲染的函数   [...]
  如果您正在编写一次性文件，则可以将数据对象作为第二个参数传递给模板，以便立即渲染而不是返回模板函数。

因此您应该调用template并将其返回值用作HTML：

$('body').html(template());
// --------------------^^

Answer 2

也许您需要传递一个对象以及模板调用：

var template = _.template($("#search_template").html(), { search_label: "Label1" });

Answer 3

使用此：

$(function() {
    var search_view = new SearchView({ el: $("#search_container") });
    search_view.render();
}

jQuery无法呈现由Underscores模板使用的html

3 个答案: