Backbone - 在当前视图上绑定和取消绑定事件

Question

我试图了解是否有必要解除绑定在当前实例上绑定的事件view.例如,当我这样做时:

$(this.el).on('click', callback);

是否有必要取消绑定事件(例如使用off()或$(this).unbind('click')在回调函数内)或者视图是否会破坏事件并将其提供给垃圾收集器？

Answer 1

您应该通过View的事件哈希设置所有事件,并在删除视图时仅取消绑定它们.remove().

Backbone Views使用DOM事件处理程序的事件委派,因此您可以为尚不存在的View HTML设置事件,并且一旦生成HTML,事件处理程序将按预期捕获事件.所有事件处理程序都附加到views根元素,并监视该元素或其子元素中发生的特定事件.

通过Backbone.View.remove()删除视图时,事件将被解除绑定

view.remove();

如果您需要在显示视图时解除绑定事件(不常见),您可以通过jQuery的.off()专门取消绑定该事件,但是,您不必(或想要)管理绑定/解除绑定事件.

手动取消绑定事件的问题在于,您可能/可能会很快发现自己有条件地解除绑定并根据用户输入绑定这些事件处理程序.你将沿着"在这里取消绑定一个事件,在这里重新绑定它,但在这个条件为真或者这个条件是假的时解开"的道路......它会很快变得混乱,脆弱和无法维护.

相反,你应该让你的DOM绑定绑定的所有的时间,有自己的执行依赖于国家的看法......有时事件处理程序可以什么都不做,但是这很好.使用这种写作视图样式,您只关心DOM事件就是您正确地删除了您的视图.在视图的状态内,您可以在视图响应某些事件时合并后面的业务逻辑.

状态在代码中是什么样的？

initialize: function {
    this.state = new Backbone.Model({ /* initial state */ });
}

繁荣.就这么简单.State 只是一个对象(或主干模型),您可以在其中存储有关视图当前状态的数据.这就像是有用数据的视图小垃圾抽屉.

是否应禁用保存按钮？

this.state.set('save_button_disabled', true);
this.state.set('save_button_disabled', false);

表格是否经过验证？错误？

this.state.set('form_valid', false);
this.state.set('form_errors', errorsArray);

然后将一些处理程序绑定到它,当用户执行某些操作时,更新状态并让处理程序处理它.记录和响应状态更改将强制您使用易于测试,易于命名和易于维护的许多小功能编写视图.拥有专用对象来存储状态是组织和合并视图中的逻辑和条件的好方法.

this.listenTo(this.state, {
    'change:save_button_disabled': this.toggleSaveButton,
    'change:form_valid': this.onFormValidationChange
});

您还可以在视图事件处理程序中点击状态:

events: {
    'click button.save': 'onSaveClicked'
},
onSaveClicked: function() {
    if ( this.state.get('form_valid') ) {
        /* do save logic */
    }
}

随着应用程序的增长,您可能还希望将状态分为查看状态,环境状态(测试,产品,开发,版本等),用户状态(登录/注销,管理员,权限,用户生日等等)以及其他.查看状态通常是第一步.

您的视图本质上应该是一堆响应DOM,State和Model/Collection事件的小型简洁函数.它应该不包含复杂的逻辑计算结果,回应和解释用户输入和模型数据..这复杂的东西应该在集合,模型和状态存在的.视图只是用户与其交互的那些项和界面的表示,就像web-app的前端是用户与数据库交互的界面一样.

查看代码:

var MyView = Backbone.View.extend({
    events: {
        "click": "onClick"
    },
    "onClick": function() {
        if ( this.state.get('clickable') ) {
             /* do callback */
        }
    },
    initialize: function(options) {
        this.options = options;
        this.state = new Backbone.Model({ clickable: true });
    },
    getTemplate: function() { /*...*/ },
    render: function() {
        var template = this.getTemplate(),
            data = {
                options: this.options,
                data: this.model.toJSON(),
                state: this.state.toJSON()
            };

        return this.$el.html(template(data));
    }
});

模板代码:

{{#if state.logged_in}}
    <p {{#if options.large}}class="font-big"{{/if}}>
        Welcome back, {{data.userName}}.
    </p>
{{else}}
    <p>Hello! {{#sign_up_link}}</p>
{{/if}}

这是一个简单的例子:http://jsfiddle.net/CoryDanielson/o505ny1j/

更多关于国家和这种发展观点的方式

在完美的世界中,视图仅仅是数据的交互式表示和应用程序的许多不同状态.视图是状态机.视图也是用户和数据之间的一个小缓冲区.它应该将用户对模型/集合的意图以及模型/集合响应传递回用户.

更多关于此:

• 模型 - 视图 - 意图:http://futurice.com/blog/reactive-mvc-and-the-virtual-dom
• Model-View-Intent幻灯片:http://staltz.com/mvi-freaklies/#/
• 另请阅读react.js文档以了解有关State的更多信息,因为它适用于reactjs组件,这些组件比Backbone.Views更低级别.http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html