Question

这是我的HTML：

<html lang="en">
<head>
  <meta charset="utf-8">
    <title>Document Router</title>
    <script src="jquery-1.7.2.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
  </head>
  <body>
  <script type="text/javascript">
      var documents = [
        new Backbone.Model({
          title: 'JavaScript Modules',
          content: 'why do we need modules? Organising JavaScript into modules makes it easier to reason about programs and makes it possible to test.'
        }),
        new Backbone.Model({
          title: 'Module Systems',
          content: 'There are three competing module systems at the moment: CommonJS, AMD and ECMAscript Harmony modules'
        })
      ]; 

      var DocumentView = Backbone.View.extend({
        render: function () {
          this.$el.append(this.make('h1', null, this.model.get('title')));
          this.$el.append(this.make('div', null, this.model.get('content')));
          return this;
        }
      });
  </script>
  </body>
</html>

在控制台中，我尝试过这样的事情：

var dv= new DocumentView();
undefined
dv.render();

并得到错误，如

env.html：51 Uncaught TypeError：无法读取属性'get' undefined（...）render @ env.html：51（匿名函数）@ VM359：1

可能是什么问题以及为什么我无法渲染

Answer 1

您在渲染方法中使用this.model.get，但您的视图没有定义模型，因此错误。您应该在创建视图实例（如

）时传入模型实例

new DocumentView({model: document.models[0]})

或在视图内部之前的某处设置this.model = modelInstance，例如在initialize方法内部，以使代码生效。

此外，您尚未在视图上定义任何make方法，因此this.make也可能会抛出错误。

Answer 2

在创建模型时将模型传递到视图中。

var dv = DocumentView({
  model: documents[0] //Passing the first model
});

dv.render();

这是一个有效的fiddle。

无法使用主干呈现视图

2 个答案: