未捕获的类型错误：无法读取未定义 _.template underscore.js 的属性“替换”

Question

我已编辑此问题，因为人们将我指向此链接：-
uncaught TypeError: Cannot call method 'replace' of undefined backbone.js

但我认为这两个问题是不同的，这里提供的解决方案也已经实现。人们还提到代码正在他们的终端上运行，如果您在您的机器上执行此代码，请点击Home Page 链接，让我知道您的首页视图是否正在加载。

实际问题
我是 Backbone.js 的新手，目前正在阅读教程。我看到不同的开发人员使用不同的方式来完成一项任务，所以我尝试混合匹配他们的方法来更深入地理解它并有一个清晰的概念。我在我的代码中试图实现的是使用路由器执行切换视图，这就是我的代码的外观（我已将其精简为基础，以便于调试）-

        <script type="text/template" id="home-template">
            <h1>This is the home page</h1>
        </script>

        <script type="text/javascript">
            var HomeView = Backbone.View.extend({
                tagName: 'div',
                initialize: function() {
                    $("body").html(this.el);
                    this.template = _.template($('#home-template').html());
                    this.render();
                },
                render: function() {
                    this.$el.html(this.template());
                }
            });

            var AppRouter = Backbone.Router.extend({
                routes: {
                    'home': 'home'
                },
                home: function() {
                    this.view = new HomeView();
                }
            });

            var appRouter = new AppRouter();
            Backbone.history.start();
        </script>

        <a href = "#/home">Home Page</a> <br />

所以当我加载页面时它加载正确，但是当我点击Home Page 链接时，它在该行中出现 JS 错误 -

this.template = _.template($('#home-template').html());

我还添加了我面临的问题的屏幕截图。对于这种错误，我查看了 stackoverflow 中给出的解决方案，并根据建议的更改修改了我的代码，但没有奏效。问题是，_.template 函数无法识别home-template 模板。知道为什么会这样以及如何解决吗？

Answer 1

$("body").html(this.el); 不会做你认为的任何事情。您必须删除它。

这样做的目的是将名为 body 的元素的 HTML 替换为 this.el 的值。当您替换 body 的内容时，您还会删除所有 script 元素，因此 $('#home-template').html() 无法找到 ID 为 home-template 的元素并返回结果 undefined，这会导致稍后在您尝试使用你的模板。

为了给你的视图附加一个元素，你可以在 HTML 中为它创建一个元素：

<div id="view">
</div>

并在创建时将其传递给您的视图，或者传递一个 CSS 选择器：

this.view = new HomeView({ el: "#view" });