0

我想我的 Backbone Marionette 应用程序中的僵尸视图可能存在问题。

  1. 如何检查未关闭的视图和内存泄漏？我正在使用适用于 Firefox 的Illuminations-for-developers.com 插件，当我在我的应用程序中移动时，我看到“小部件”照明选项卡中堆积了1000 多个视图——当我检查它们的HTML 时，大多数是不在 DOM 中。这些是僵尸视图吗？
  2. 添加了我在下面使用的代码，以获取人们对我是否以正确的方式解决问题的意见。

我正在尝试构建一个类似于 Facebook 多朋友选择器对话框的 UI（见图）。

我有一个包含两个集合视图的布局，一个填充了用户列表，一个空的则添加了选定的用户。

我想在我的应用程序的多个区域中使用此布局。所以我构建了一个控制器对象来处理初始化它并加载集合的数据，然后我初始化它并在需要时将它显示在另一个区域中。

希望得到有关如何解决此问题的提示，谢谢。

代码：

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

4

0 回答 0