javascript - バックボーンマリオネットレイアウトのゾンビビューとイベント...それらを取得しましたか?

Question

バックボーンマリオネットアプリのゾンビビューに問題があると思います。

閉じられていないビューとメモリリークを確認するにはどうすればよいですか? 私はFirefox用のilluminations-for-developers.comアドオンを使用しており、アプリケーションを移動すると、「ウィジェット」イルミネーションタブに1000を超えるビューが積み重なっているのが見えます.HTMLを調べてみると、それらの大部分はDOM にはありません。これらはゾンビ化されたビューですか?
問題を正しい方法で攻撃しているかどうかについて人々の意見を得るために、以下で使用しているコードを追加しました。

Facebook の複数の友達を選択するダイアログに似た UI を構築しようとしています (写真を参照)。

2 つのコレクションビューを持つレイアウトがあります。1 つはユーザーのリストが入力され、もう 1 つは選択されたユーザーが追加される空のコレクションです。

このレイアウトをアプリの複数の領域で使用したいと考えています。そのため、初期化とコレクションのデータの読み込みを処理するコントローラーオブジェクトを作成し、それを初期化して、必要に応じて別の領域に表示します。

これについてのヒントをいただければ幸いです。ありがとうございます。

コード:

MyApp.UserFilterController

MyApp.UserFilterController = (function(){
var UserFilterController = {};
var selectedUsersCol;
var userFilterColView;
var selectedUsersColView;
var usersCol;

UserFilterController.initialize = function ( callback, excludeUsers ) {
    // make a query...
    // exclude the users...
    var usersQ = new Parse.Query(Parse.User);
    // just users with email addresses
    usersQ.exists('email');
    usersQ.exists('name');
    usersQ.limit(1000);
    usersQ.ascending('name');
    usersQ.notContainedIn('objectId',excludeUsers);
    usersCol = usersQ.collection();
    // tell it where to render... append to the body give it an element?

    userFilterColView = new MyApp.UserFilterUserCollectionView({
        collection:usersCol
    });

    usersCol.fetch({
        success:function (col) {
            console.log("users collection fetched", col.length);
        },
        error:function () {
            console.log("error fetching users collection");
        }
    });

    $('#subpage-header').text("Users Selection");

    // empty collection to hold the selected users
    selectedUsersCol = new MyApp.Users();
    // view to show the selected users
    selectedUsersColView = new MyApp.SelectedUserCollectionView({
        collection:selectedUsersCol
    });
    _.extend(selectedUsersCol, newBackboneAddMethod());

    MyApp.userFilterLayout = new MyApp.UserFilterLayout();

    MyApp.slideUp.content.show(MyApp.userFilterLayout);

    MyApp.userFilterLayout.selectedusers.show(selectedUsersColView);
    MyApp.userFilterLayout.allusers.show(userFilterColView);

    //When user clicks on user in all users then its added to selected users
    userFilterColView.on("itemview:clicked", function(childView, model){
        console.log(model);
        selectedUsersCol.add(model);
    });


    userFilterColView.on("collection:rendered", function(childView, model){
        console.log('its rendered');
    });

    //When user clicks on selected user then it is removed from the collection
    selectedUsersColView.on("itemview:clicked", function(childView, model){
        console.log(model);
        console.log(model.id);
        selectedUsersCol.remove(model);
    });

    MyApp.App.vent.bind("slideUp:send",function(){
        console.log("send button has been clicked. attempting call back")
        callback(selectedUsersCol);
    });

    //unbinds the trigger above when view is being closed
    userFilterColView.on('collection:before:close', function (){
        MyApp.App.vent.unbind("slideUp:send");
        console.log('colView before:close')
    });
};

UserFilterController.removeUser = function ( user ) {
    //console.log("you asked to remove", usersArray.length, 'users');
    selectedUsersCol.remove(user);
    usersCol.remove(user);
};
UserFilterController.generateListview = function ( user ) {
    userFilterColView.$el.listview();
};
UserFilterController.resetSelected = function (user) {
    selectedUsersCol.reset();
};
UserFilterController.cleanup = function () {
    console.log("its closing");
    //selectedUsersColView.unbindAll();
    //        selectedUsersColView.close();
    userFilterColView.close();
   // userFilterLayout.unbindAll();
    //        MyApp.userFilterLayout.close();
    //        MyApp.slideUp.content.close();
   // MyApp.slideUp.close();
};

return UserFilterController;
}());

MyApp.EventDisplayLayout

MyApp.EventDisplayLayout = Backbone.Marionette.Layout.extend({
    template: '#event-display-layout',
    id: "EventDisplayLayout",

    events: {
        'click #invite':  'showUserFilter'        
    },

    // User clicked on 'invite' button
    showUserFilter: function () {        
        $.mobile.changePage($('#subpage'), {changeHash: false,transition: 'slideup'});
        MyApp.UserFilterController.generateListview();
    }
}

MyApp.showEventDisplay

MyApp.showEventDisplay = function (event) {
var eventDisplayLayout = new MyApp.EventDisplayLayout({});
MyApp.App.mainRegion.show(eventDisplayLayout);    

var Invitees = event.get("invitees");
var excludeIds = [];
_.each(Invitees,function(invitee){
    excludeIds.push(invitee.id);
});
MyApp.UserFilterController.initialize(function (selectUsersCol){
    console.log("In call back: ",selectUsersCol);
},excludeIds);
};

MyApp.SlideUpPageLayout

// The generic layout used for modal panel sliding up from bottom of page.
MyApp.SlideUpPageLayout = Backbone.Marionette.Layout.extend({
    el: '#subpage',
    //template: '#homepage-temp',
    regions: {
        header: '.header',
        content: '.content'
    },
    events:{
        'click .send':'slideUpSend',
        'click .cancel':'slideUpCancel'
    },
    onShow: function () {
        console.log("SlideUpPage onShow");
        this.$el.trigger('create');
    },
    initialize: function () {
        // make user collection...

    },
    slideUpSend: function () {
        console.log("send button has been pressed");
        MyApp.App.vent.trigger('slideUp:send');
        $.mobile.changePage($('.type-home'),{transition: 'slideup',reverse:true});
    },
    slideUpCancel: function () {
   //     MyApp.App.vent.trigger('slideUp:cancel');
        $.mobile.changePage($('.type-home'),{transition: 'slideup',reverse:true});
    }
});

MyApp.UserFilterLayout

// The layout used for the user filter panel sliding up from bottom of page.
MyApp.UserFilterLayout = Backbone.Marionette.Layout.extend({
    template: '#userfilterlayout',
    //template: '#homepage-temp',
    regions: {
        selectedusers: '.selectedusers',
        allusers: '.allusers'
    },

    onShow: function () {
        console.log("userfilterlayout onShow");
        this.$el.trigger('create');
    }
});

Facebook マルチフレンドセレクター UI

javascript - バックボーン マリオネット レイアウトのゾンビ ビューとイベント...それらを取得しましたか?

0 に答える 0

Related

Reference

javascript - バックボーンマリオネットレイアウトのゾンビビューとイベント...それらを取得しましたか?