0

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

在 View 的渲染功能中，我在 HTML 文件中提取脚本

id='搜索模板'

使用 jQuery 并通过 jQuery 传递它

.html()

将其转换为字符串，然后将其传递给下划线

_.template ( 字符串 )

但是，下划线会引发错误

未捕获的类型错误：无法调用 null 的“替换”方法

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

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();

我从渲染函数中删除了 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>
4

3 回答 3

1

这render：

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

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

您在某处有错字或顺序问题：

  1. 如果您不包含#search_template在 HTML 中，请修复 HTML。
  2. 如果您render之前#search_template在 DOM 中运行，则将您的render调用放入$(function() { ... })包装器中，以便在 DOM 准备好之前不会调用它。
  3. 如果您有错字，请id更正您的错字。

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

顺便说一句，_.template返回一个函数（除非您也将第二个参数传递给它）：

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

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

所以你应该调用template并使用它的返回值作为 HTML：

$('body').html(template());
// --------------------^^
于 2012-04-26T19:57:27.027 回答
0

也许您需要将对象与模板调用一起传递：

var template = _.template($("#search_template").html(), { search_label: "Label1" });
于 2012-04-26T18:58:22.180 回答
0

用这个：

$(function() {
    var search_view = new SearchView({ el: $("#search_container") });
    search_view.render();
}
于 2012-07-17T07:40:20.440 回答