Question

我不知道为什么会这样。我在视图中收集了一个未定义的错误。我假设它是因为视图在模型和集合之前加载。我不明白了！

router.js

// js/router.js

define([
    'jquery',
    'underscore',
    'backbone',
    'views/home'
], function($, _, Backbone, HomeView) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            '': 'home'
        }
    });

    var initialize = function() {
        var app_router = new AppRouter;

        app_router.on('route:home', function() {
            var homeView = new HomeView();
            homeView.render();
        });

        Backbone.history.start();
    };

    return {
        initialize: initialize
    };
});

视图/ home.js

// js/views/home.js

define([
    'jquery',
    'underscore',
    'backbone',
    'models/tournaments/featured',
    'collections/home',
    'text!/templates/home.html'
], function($, _, Backbone, FeaturedModel, HomeCollection, homeTemplate) {
    var HomeView = Backbone.View.extend({
        initialize: function() {
            var collection = new HomeCollection();
            _.bindAll(this, 'render');
        },

        render: function() {
            console.log(this.collection.models);
            //var data = {tournaments: this.collection.toJSON};
            //var compiledTemplate = _.template(homeTemplate, data);
            //$('#site-main').html(compiledTemplate);    
        }
    });
    return HomeView;
});

脚本顺序：在头部

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="js/main.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="app" src="js/app.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="underscore" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="router" src="js/router.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquerym" src="//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="backbone" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="views/home" src="js/views/home.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="models/tournaments/featured" src="js/models/tournaments/featured.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="collections/home" src="js/collections/home.js"></script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="text" src="js/text.js"></script>

集合/ home.js

// js/collections/home.js

define([
    'backbone',
    'models/tournaments/featured'
], function(Backbone, FeaturedModel) {
    var HomeCollection = Backbone.Collection.extend({
        model: FeaturedModel,
        url: '/api/tournaments.php',
        parse: function(response) {
            return response;
        }
    });

    var homeCollection = new HomeCollection();
});

Answer 1

正如@jgillich指出的那样，你这样做：

var collection = new HomeCollection();

但应该是：

this.collection = new HomeCollection();

fwiw，JSHint会为你抓住这个。

Answer 2

我通过替换

摆脱了未定义的错误

var homeCollection = new HomeCollection();

与

return HomeCollection;

在js / collections / home.js中。现在我可以继续其余的，感谢您的帮助！

Backbone.js在模型和集合之前加载视图

2 个答案: