在backbone.js中重新渲染后未触发的事件_Backbone.js_Backbone Views_Backbone Events_Backbone Routing

在backbone.js中重新渲染后未触发的事件

backbone.js

在backbone.js中重新渲染后未触发的事件,backbone.js,backbone-views,backbone-events,backbone-routing,Backbone.js,Backbone Views,Backbone Events,Backbone Routing,我在重新渲染后尝试单击“提交”时遇到问题我的看法是： ShareHolderInfoView = Backbone.View.extend( { template : 'shareholderinfo', initialize: function() { this.model = new ShareHolderInfoModel(); }, render : function() { $.get("shareholderinfo.html", function(template

我在重新渲染后尝试单击“提交”时遇到问题

我的看法是：

ShareHolderInfoView = Backbone.View.extend( {
template : 'shareholderinfo',
initialize: function() {
    this.model = new ShareHolderInfoModel();
},
render : function() {
    $.get("shareholderinfo.html", function(template) {
        var html = $(template);
        that.$el.html(html);
    });

    //context.loadViews.call(this);
    return this;
},
events:{
    "change input":"inputChanged",
    "change select":"selectionChanged",
    "click input[type=submit]":"showModel"
},
inputChanged:function(event){
    var field = $(event.currentTarget);
    var data ={};
    data[field.attr('id')] = field.val();
    this.model.set(data);
},
showModel:function(){
    console.log(this.model.attributes);
    alert(JSON.stringify(this.model.toJSON()));
}
});

这是我的路由器

var shareholderInfo,  accountOwnerInfo;

App.Router = Backbone.Router.extend({

    routes:{
        'share':'share',
        'joint':'joint'
    },
    share:function(){

        $("#subSection").empty();
        if(!shareholderInfo){
            shareholderInfo = new ShareHolderInfoView();
            $("#subSection").append(shareholderInfo.render().el);
        } else{
            $("#subSection").append(shareholderInfo.$el);
        }
    },
    joint:function(random){
        $("#subSection").empty();
        if(!accountOwnerInfo){
            accountOwnerInfo = new AccountOwnerInfoView();
            $("#subSection").append(accountOwnerInfo.render().el);
        } else{
            $("#subSection").append(accountOwnerInfo.$el);
        }
    }
});

这是我的HTML a div，id='subSection'

如果我签入控制台，我可以看到绑定到该视图的事件

Object {change input: "inputChanged", change select: "selectionChanged", click input[type=submit]: "showModel"}

但在我单击submit之后，它不会调用showModel函数。请帮助。

您的根本问题是不正确地重用视图

从：

.empty（）

说明：从DOM中删除匹配元素集的所有子节点。
[…]
为了避免内存泄漏，jQuery在删除元素本身之前从子元素中删除其他结构，如数据和事件处理程序

所以当你说：

$("#subSection").empty();

您不仅清除了

#subSection

的内容，还删除了附加到

#subSection

中任何内容的所有事件处理程序。特别是，您将删除绑定到

accountOwnerInfo.el

或

shareholderInfo.el

的任何事件处理程序（取决于

#subSection

中已经存在的事件处理程序）

重用视图通常比它的价值更麻烦，您的视图应该足够轻量级，以便您可以根据需要销毁和重新创建它们。破坏视图的正确方法是调用它。您可以重写路由器，使其看起来更像：

App.Router = Backbone.Router.extend({
    routes: {
        'share':'share',
        'joint':'joint'
    },
    share: function() {
        this._setView(ShareHolderInfoView);
    },
    joint: function(random){
        this._setView(AccountOwnerInfoView);
    },
    _setView: function(view) {
        if(this.currentView)
            this.currentView.remove();
        this.currentView = new view();
        $('#subSection').append(this.currentView.render().el);
    }
});

如果您的视图需要任何额外的清理，那么您可以覆盖它们上的

remove

来清理额外的内容，然后链接到

Backbone.View.prototype.remove.call（this）

来调用默认的

remove

如果出于某种原因，您需要保留您的观点，您可以拜访他们：

delegatevents

delegatevents（[events]）

使用jQuery的

on

函数为视图中的DOM事件提供声明性回调。如果未直接传递events哈希，则使用

this.events

作为源

你会说这样的话：

$("#subSection").append(shareholderInfo.$el);
shareholderInfo.delegateEvents();

而不仅仅是：

$("#subSection").append(shareholderInfo.$el);

我强烈建议您处理视图和廉价的临时对象：销毁它们以将其从页面中删除，在需要进入页面时创建新的视图。