Question

我的Backbone项目发生了一些奇怪的事情。我正在重建它作为AMD，我不得不改变一些变量名称以使其再次运行。我有一个我正在传递给视图的集合，但是当我console.log集合时，我得到了对象和null。

以下是我的观点：

define([
    'jquery',
    'underscore',
    'backbone',
    'models/tableModel',
    'collections/tablesCollection',
    'views/tablesView',
    'views/tableView'
],
function($, _, Backbone, tableModel, tablesCollection, tableView) {
    var tv = Backbone.View.extend({
        tagName: 'div',
        initialize: function() {
            console.log(this.collection);
            this.collection.on('reset', this.render, this);
            this.template = this.options.template;
            this.url = this.collection.url;

        },
        render: function() {
            //tablesCollection.collection.each(this.addOne, this);
            return this;
        },
        addOne: function(model) {
            var t = new tableView({ model: model, template: this.template, url: this.url });
            this.$el.append(t.render().el);
            return this;
        },
        stripQueryString: function(url) {
            return url.split('?')[0];
        }
    });

    return tv;
});

你会在项目中看到console.log几行。以下是我在Firebug中得到的结果：

enter image description here

两者都引用相同的行号。这是对象中的内容：

enter image description here

这里发生了什么？为什么我得到同样的两个结果？其中一个是我想要的，而另一个则不是。

编辑：这是我实例化视图的地方：

define([
    'jquery',
    'underscore',
    'backbone',
    'models/tableModel',
    'collections/TablesCollection',
    'views/tablesView',
    'views/tableView'
], function($, _, Backbone, TableModel, tablesCollection, tablesView, tableView) {
    var t = new tablesCollection(null, { url: 'main-contact'} );
    var tables = new tablesView({ collection: t, template: 'main-contact-template'});
    $('#web-leads').html(tables.render().el);

});

这是我的收藏：

define([
    'jquery',
    'underscore',
    'backbone',
    'models/tableModel'
],
function($, _, Backbone, tableModel) {
    var tablesCollection = Backbone.Collection.extend({
        url: this.url,
        model: tableModel,
        initialize: function(models, options) {
            if (options && options.url) {
                this.url = options.url;
            }
            this.fetch({
                success: function(data, options) {

                }
            });
        }
    });

    return tablesCollection;
});

另外两个文件：

// Filename: app.js
define([
    'jquery',
    'underscore',
    'backbone',
    'router' // Request router.js
], function($, _, Backbone, Router){
    var initialize = function(){
    // Pass in our Router module and call it's initialize function
    Router.initialize();
};

return {
    //initialize: initialize  <--This is where the second init call was happening.
};
});

Main.js：

 require.config({
        paths: {
            //jquery: 'libs/jquery/jquery-1.8.3.min',
            underscore: 'libs/underscore/underscore-min',
            backbone: 'libs/backbone/backbone-min'
        }
    });

    if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
      define( 'jquery', [], function () { return jQuery; } );
    }

    //the "main" function to bootstrap your code
    require(['jquery', 'underscore', 'backbone', 'app'],
        function () {
            var App = require('app');
            App.initialize();
            // console.log($);
            // console.log(_);
            // console.log(Backbone);
    });

Answer 1

您之前的代码版本比此编辑版本更有意义，就像在之前的版本中您实际上向console.log提出了麻烦的对象

// contents of 'that/view/that/gives/me/problems.js'
define([
    'jquery',
    'underscore',
    'backbone',
    'models/tableModel',
    'collections/tablesCollection',
    'views/tablesView',
    'views/tableView'
],
function($, _, Backbone, tableModel, tablesCollection, tableView) {
    console.log("factory", tablesCollection.collection); // <- you did not have this line. my addition
    var tv = Backbone.View.extend({
        tagName: 'div',
        initialize: function() {
            console.log("init", tablesCollection.collection); // <- your prior version. Point of your error
            this.collection.on('reset', this.render, this);
            this.template = this.options.template;
            this.url = this.collection.url;

        }
        // ...
    });

    return tv;
});

现在你出现两次的原因是因为你在上面定义的视图在某处初始化了两次。

首次初始化时，它会显示您可以看到的值。第二次指针tablesCollection被某些东西清理干净，因此你就有了这个错误。

现在清理tablesCollection以及为什么我在您提供的代码中看不到任何内容。它可能与在代码中某处重新要求'collections / tablesCollection'模块有关。正如我从'collections / tablesCollection'模块代码中看到的那样，您可以在每次工厂调用时重新定义输出。我要做的是计算一次并提供缓存服务：

// contents of 'collections/tablesCollection.js'
;(function(){

    var mythings = {}

    function initializer($, _, Backbone, tableModel){
        return Backbone.Collection.extend({
            url: 'url',
            model: tableModel,
            initialize: function(models, options) {
                // ...
            }
        });
    }

    define([
        'jquery',
        'underscore',
        'backbone',
        'models/tableModel'
    ],
    function($, _, Backbone, tableModel) {
        if (!mythings.tablesCollection){
            // this will be done on first run.
            mythings.tablesCollection = initializer($, _, Backbone, tableModel)
        }
        // all others will just return same exact instance of collection class
        return mythings.tablesCollection
    })

})();

编辑：

每个要求都

Asked the AMD spec group if there is a chance of 'factory' function rerunning。立即回答是“不太可能”，但长期回答是“可能（如果以不同名称提出）”

我在上面的代码段中添加了注释行，指出它们是什么文件。

我还在第一个代码段中添加了一个console.log行，它可以帮助您了解您所遇到的问题不是AMD加载程序。您只需在某处初始化两次视图。

当你在顶部代码段中使用注释行运行代码时，您会看到factory日志行仅显示一次而init行只显示两次，就像您的origianl错误屏幕截图一样。

您需要跟踪使用该tv变量中返回的视图的位置。你正在开始两次。

关于在第二次运行中对tablesCollection的引用（清除什么）发生了什么，我不知道，也没有看到你提供的片段中的任何地方。

Backbone console.log返回集合和未定义

1 个答案: