骨干向视图传递事件并将其与父视图解除绑定答案

【问题标题】：Backbone passing a view an event and unbinding it from parent view骨干向视图传递事件并将其与父视图解除绑定
【发布时间】：2014-11-20 14:47:59
【问题描述】：

我想知道是否可以传递一个 view en 事件，然后停止该事件再次运行，直到另一个方法运行？

这是我的设置，

主视图方法

changeAdmin: function(e) {

    var element = $(e.currentTarget),
        userID = element.data('user'),
        is_admin = (element.is(':checked')) ? 1 : 0,
        confirmMsg = (element.is(':checked')) ? 'Adding administration rights to this user will add them to all of ' + this.model.get('name') + '\'s projects.' : 'Removing administration rights from this user will remove them from all of ' + this.model.get('name') + '\'s projects.';

    var notify = new App.Views.ConfirmationView({
        message: confirmMsg,
        confirm_callback: function(){

        },
        fail_callback: function() {

        },
        vent: e

    });

    notify.render();

    var user = this.model.get('members').get(userID);
    user.get('pivot').is_admin = is_admin;
    user.set('admin', is_admin);

    console.log(user.get('pivot'));


},

子视图

    'use strict'
App.Views.ConfirmationView = Backbone.View.extend({

    tagName: 'div',
    className: 'notification alert alert-warning',

    template: _.template( $('#tpl-cofirmation').html() ),

    events: {
        "click .js-confirm" : "runSuccessCallback",
        "click .js-cancel": "runFailCallback"
    },

    initialize: function(options) {
        this.options = options;
        this.confirm = options.confirm_callback;
        this.fail = options.fail_callback;
    },


    render: function() {
        //var self = this;
        this.$el.html(this.template({
            message: this.options.message
        })).css({
            'z-index':'9999',
            'position':'absolute', 
            'padding':'10px',
            'left':'50%',
            'top' : '0px',
            'transform': 'translate(-50%, 0px)'
        }).animate({
            'top' : '150px'
        }, 500, 'easeOutExpo').prependTo('body');

    },

    cancel: function() {
        this.$el.hide();
    },

    confirm: function() {
        this.$el.hide();
    },

    runSuccessCallback: function(){

       this.confirm();
       $.when(this.$el.animate({
        'top' : '-150px'
       }, 500, 'easeOutExpo').promise()).done(function(){
        this.remove();
       });
    },

    runFailCallback: function(){
       this.fail();
       $.when(this.$el.animate({
        'top' : '-150px'
       }, 500, 'easeOutExpo').promise()).done(function(){
        this.remove();
       });

    }

});

在子视图渲染上，我想禁用传递的事件，然后在 fail() 或 success() 上重新激活，这可能吗？

【问题讨论】：

我认为您应该重新考虑您的解决方案。你所解释的听起来非常不合常规。与其取消绑定事件，不如设置某种标志。如果标志为 false，则不要执行事件处理程序内部的代码。
我认为您应该在success() 或fail() 之后触发另一个事件，然后让子视图监听该事件。您可能想研究 .then() 而不是在成功和失败时重写相同的代码

标签： javascript backbone.js backbone-views event-delegation event-binding

【解决方案1】：

我在这里做一个假设。我猜你真正得到的是你不想让 notify.render() 连续多次从父级触发，除非其中一个回调被调用。在这个假设下，我认为孩子的观点不应该是放弃倾听的观点。您需要暂时禁用父视图中调用changeAdmin 的任何事件。我认为将其放在子视图中会使两者相互交织，超出您的需要（违反 SoC 原则 IMO）。

也就是说，在渲染子视图并重新启用回调中的事件之前，我会考虑在父视图中使用http://backbonejs.org/#View-undelegateEvents（例如，this.undelegateEvents()，如下所示：

changeAdmin: function(e) {

    var self = this;
    this.undelegateEvents();


    var confirm_callback = function() {
        // do confirm stuff

        // re-enable events at the bottom of this callback
        self.delegateEvents();
     };

     var notify = new App.Views.ConfirmationView({
        confirm_callback: confirm_callback,
     });

     notify.render();
}

我删除了一些与解释无关的代码部分，但希望您能理解。你会为 fail_callback 做类似的事情。

【讨论】：