Question

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

这是我的设置，

主视图方法

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();
       });

    }

});

在子视图渲染上我想要禁用传递的事件然后在失败（）或成功（）重新激活它是否可能？

Answer 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做类似的事情。

Backbone将视图传递给事件并从父视图中解除绑定

1 个答案: