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()无法找到标识为home-template的元素并返回结果{{1}当您尝试使用模板时，这会导致失败。

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

undefined

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

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

未捕获的TypeError：无法读取undefined _.template underscore.js

1 个答案: