0

我每个功能都有下一个问题。我想从集合中渲染所有表，然后添加创建新表的功能。但我不知道为什么我有控制台错误：

未捕获的类型错误：无法调用未定义的方法“每个”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Backbone test</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="jumbotron">
  <div class="container">
    <h1>My tables!</h1>
  </div>
</div>
</header>
<content>
    <div id="add-table">
      <div class="container">
        <label>Add new table!</label>
        <form>
            <legend>Name</legend>
            <div class="input-group">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                </span>
                <input type="text" class="form-control">
            </div>
        </form>
      </div>
    </div>
    <div id="content"></div>
</content>
<script id="allTableTemlate" type="text/template">
<li><%= name %></li>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script>
// !main.js

(function() {
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Router: {}
    };
    window.vent = _.extend({}, Backbone.Events);
    window.template = function(id) {
        return _.template( $('#' + id).html() );
    };
})();

// !models.js

App.Models.Table = Backbone.Model.extend({});

// !collections.js

App.Collections.Tables = Backbone.Collection.extend({

    model: App.Models.Table,
    url: 'tables.json'
});

// !views.js

App.Views.App = Backbone.View.extend({
    initialize: function() {
        var allTablesView = new App.Views.Tables({ collection: App.tables }).render();
        $(document.body).append(allTablesView.el);
    }
});
App.Views.Tables = Backbone.View.extend({
    tagName: 'ul',
    render: function() {
      this.collection.each( this.addOne, this );
      return this;
    },
    addOne: function(table) {
        var tableView = new App.Views.Tables({ model: table });
        this.$el.append(tableView.render().el);
    },    
});
App.Views.Table = Backbone.View.extend({
    tagName: 'li',
    template: template('allTableTemlate'),
    render: function() {
          this.$el.html( this.template( this.model.toJSON() ) );
      return this;
    },
});

// !router.js

App.Router = Backbone.Router.extend({
    routes: {
        '':'index',
    },
    index: function() {
        console.log('index page !');
    },
});

// !index.html

new App.Router;
Backbone.history.start();
App.tables = new App.Collections.Tables;
App.tables.fetch().then(function() {
    new App.Views.App({ collection: App.tables });
});
</script>
</body>
</html>

这是我带有 json 数据的完整代码：

[
    {"name": "Table 1","stts": "redstts","id": 1},
    {"name": "Table 2","stts": "redstts","id": 2},
    {"name": "Table 3","stts": "redstts","id": 3},
    {"name": "Table 4","stts": "redstts","id": 4},
    {"name": "Table 5","stts": "redstts","id": 5}
]
4

1 回答 1

2

您的 addOne 函数中有错字。您应该创建一个新的 "App.Views.Table" 而不是 "new App.Views.Tables" ：

addOne: function(table) {
    var tableView = new App.Views.Table({ model: table });
    this.$el.append(tableView.render().el);
}
于 2013-09-19T11:31:08.893 回答