0

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

这是我的设置，

主视图方法

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() 上重新激活，这可能吗？

4

1 回答 1

0

我在这里做一个假设。我猜你真正得到的是你不想让 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 做类似的事情。

于 2014-11-20T19:50:51.067 回答