0

私のバックボーンプロジェクトで何か奇妙なことが起こっています。私はそれを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で得られるものは次のとおりです。

ここに画像の説明を入力してください

どちらも同じ行番号を引用しています。オブジェクトの内容は次のとおりです。

ここに画像の説明を入力してください

ここで何が起こっているのですか？同じことで2つの結果が得られるのはなぜですか？それらの1つは私が欲しいものであり、もう1つはそうではありません。

編集：ここで私はビューをインスタンス化します：

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;
});

他の2つのファイル：

// 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);
    });
4

1 に答える 1

0

以前のバージョンのコードは、この編集されたバージョンよりも意味がありました。以前のバージョン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;
});

これが 2 回表示される理由は、上記で定義したビューがどこかで 2 回初期化されるためです。

初めて初期化すると、ご覧のとおり値が表示されます。ポインターの 2 回目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
    })

})();

編集：

すべての要求で「工場」機能が再実行される可能性があるかどうか、AMD 仕様グループに尋ねました。即時の回答は「ありそうもない」でしたが、長期的な回答は「可能です（別の名前で尋ねられた場合）」です。

上記のコード スニペットに、ファイルが何であるかを示すコメント行を追加しました。

また、最初のスニペットに console.log 行を追加しました。これにより、発生している問題が AMD ローダーにあるのではないことを理解するのに役立ちます。ビューをどこかで 2 回初期化するだけです。

上のスニペットのようにコメント行を付けてコードを実行すると、元のエラー スクリーンショットのように、factoryログ行が 1 回だけ表示され、2 回行が表示されます。init

tvその変数で返されたビューを使用する場所をトレースする必要があります。あなたはそれを2回開始しています。

2回目の実行で参照がどうなるか（何がクリアされるか）についてtablesCollectionは、あなたが提供したスニペットのどこにもわかりません。

于 2013-01-26T22:48:49.623 に答える