javascript - 当 Backbone 应用程序中触发输入字段事件时，第一个 View 会从第二个 View 中意外呈现？

Question

我有每个 View ，每个 View 都有一个模型和一个模板以及一个表单模型实例，以便从各自的模板中呈现它们。可以从两个 View 访问表单模型实例以呈现其模板。需要在每次输入字符时更新此表单模型实例，并用此表单模型实例设置两个 View 中当前 View 的模型。为此，我在两个 View 中的 input 元素上都有一个 keyup 事件，这两个 View 具有不同数量的输入 View 。第二个 View 具有与第一个 View 相同的类型、命名、id、input 字段以及一些不同的字段。

当我在具有更多输入字段的第二个 View 上并单击并在两个 View 都有的输入字段中键入字符时，将呈现第一个 View 。在路由到另一个 View 之前从其中一个 View 调用 this.unbind() 不起作用。

这是什么原因呢？完成此操作后，我没有事件可以渲染它。主路由器:

    define([
    'jquery',
    'ratchet',
    'underscore',
    'backbone',

    'forms/formsdatamodel',
    'login/loginview',
    'register/registerview',

    'home/homeview',
    ],
    function($, Ratchet, _, Backbone, FormsDataModelInst, LoginView, RegisterView, HomeView){
        var MainRouter = Backbone.Router.extend({
            routes: {
                "": "render_home",              
                "login": "render_login",
                "register": "render_register"
            },
            initialize: function(){
                this.model = FormsDataModelInst;
                this.listenTo( this.model, 'change', this.render_home );//this solved render_home problem.
            },
            render_home: function(){
                if( this.model.get('loginp') == true ){ //show you app view for logged in users!
                    this.homeView = new HomeView();
                    this.homeView.render();
                }
                else { //not logged in!
                    Backbone.history.navigate("/login", {trigger:true});
                }
            },
            render_login: function(){ //display your login view
                this.loginView = new LoginView;
                //this.loginView.delegateEvents();
                this.loginView.render();
            },
            render_register: function(){ //display your register view
                this.registerView = new RegisterView;
                //this.registerView.delegateEvents();
                this.registerView.render();
            },
        });

        return MainRouter;
});

登录 View :

    define([
    'jquery',
    'ratchet',
    'underscore',
    'backbone',

    'login/loginmodel',
    'text!login/logintemplate.html',

    'forms/formsdatamodel',

    ],
    function($, Ratchet, _, Backbone, LoginModel, LoginTemplate, FormsDataModelInst){
        var LoginView = Backbone.View.extend({

            el: $('body'),

            initialize: function(){
                this.model = new LoginModel();
            },

            template: _.template( LoginTemplate ),

            render: function(){ //display your login view
                this.$el.html( this.template( FormsDataModelInst.attributes ) );
            },
            events: {
                'keyup input#username' : 'updateModel',
                'click #loginbutton' : 'login',
                'click #renderregisterbutton' : 'render_register',
            },
            updateModel: function(e){
                e.preventDefault();
                var elm = e.target;
                FormsDataModelInst.set( elm.id, $( elm ).val() );
                this.model.set( FormsDataModelInst );

                console.log( "1-FormsDataModelInst:" + JSON.stringify( FormsDataModelInst.attributes ) );
                console.log( "2-this.model.set(...):" + JSON.stringify(this.model.attributes) );
            },
            login: function(e){
                e.preventDefault();
                this.model.save();

                console.log( "3-this.model.save():" + JSON.stringify(this.model.attributes) );
            },
            render_register: function(e){
                e.preventDefault();
                this.undelegateEvents();
                Backbone.history.navigate("/register", {trigger:true});
            },
        });

        return LoginView;
});

注册 View :

    define([
    'jquery',
    'ratchet',
    'underscore',
    'backbone',

    'register/registermodel',
    'text!register/registertemplate.html',

    'forms/formsdatamodel',
    ],
    function($, Ratchet, _, Backbone, RegisterModel, RegisterTemplate, FormsDataModelInst){
        var RegisterView = Backbone.View.extend({

            el: $('body'),

            initialize: function(){
                this.model = new RegisterModel();
            },

            template: _.template( RegisterTemplate ),

            render: function(){ //display your login view
                this.$el.html( this.template( FormsDataModelInst.attributes ) );
            },
            events: {
                'keyup input#username' : 'updateModel',
                'keyup input#phone' : 'updateModel',
                'keyup input#email' : 'updateModel',

                'click #registerbutton' : 'register',
                'click #renderloginbutton' : 'render_login',
            },
            updateModel: function(e){
                e.preventDefault();
                var elm = e.target;
                FormsDataModelInst.set( elm.id, $( elm ).val() );
                this.model.set( FormsDataModelInst );

                console.log( "FormsDataModel:" + JSON.stringify( FormsDataModelInst ) );
                console.log( "this.model.set(...):" + JSON.stringify(this.model.attributes) );
            },
            login: function(e){
                e.preventDefault();
                this.model.save();

                console.log( "this.model.save():" + JSON.stringify(this.model) );
            },
            render_login: function(e){
                e.preventDefault();
                this.undelegateEvents();
                Backbone.history.navigate("/login", {trigger:true});
            },
        });

        return RegisterView;
});

Answer 1

当您实例化 View 时，您可以在该 View 的 el 上设置事件绑定(bind)。不同的 View 是否也使用相同的 input 并不重要；只要第一个 View 仍然存在，它的事件处理程序就会继续监听并响应事件。

您尝试调用 this.unbind() 的想法是正确的...只不过 View 没有 unbind > 方法。不过，他们确实有一个 undelegateEvents 方法，我认为这就是您正在寻找的方法。