0

機能ごとに次の問題があります。コレクションからすべてのテーブルをレンダリングした後、新しいテーブルを作成するための関数を追加します。しかし、コンソールエラーが発生した理由がわかりません:

キャッチされていない TypeError: 未定義のメソッド 'each' を呼び出せません

<!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.Tables」ではなく、新しい「App.Views.Table」を作成する必要があります。

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