Обновите регион с помощью onclick, используя backbone.js и marionette.js

Question

Ниже мое событие onclick для обновления региона

'click div.tile-config ul.dropdown-menu li a.refresh': 'clickRefresh'

Ниже мой код обновления для региона

clickRefresh: _.bind(function(e){
    $(this).parents('.tile');
    this.blockUI(e);
    window.setTimeout(function(){
        alert("unblockUI");
        this.unblockUI(e);
    }, 1000);
    e.preventDefault();
},this),

blockUI: function(event){
    $(event).block({
        message: '<img src="res/lib/custom/img/loading.gif" align="absmiddle">',
        css: {
            border: 'none',
            padding: '2px',
            backgroundColor: 'none'
        },
            overlayCSS: {
            backgroundColor: '#000',
            opacity: 0.05,
            cursor: 'wait'
        }
    });
},

unblockUI: function(event){
    $(event).unblock({
        onUnblock: function () {
            $(event).removeAttr("style");
        }
    });
}

Когда я нажимаю на ссылку обновления, она не обновляется и не получает сообщение "Ошибка типа: this.blockUI(e) не является функцией". Пожалуйста, помогите мне.

Answer 1

Это, вероятно, потому что вам не нужно помещать привязку на основную функцию, а на обратный вызов на тайм-аут

попробуй это

clickRefresh: function(e){
    $(this).parents('.tile');
    this.blockUI(e);

    window.setTimeout(_.bind(function(){
        alert("unblockUI");
        this.unblockUI(e);
    },this), 1000);

    e.preventDefault();
},

Изменить: поэтому в данный момент вы пытаетесь поместить блок на событие, которое не является элементом DOM. Если вы хотите разместить блокиратор над кнопкой обновления, используйте event.currentTarget вот так

    blockUI: function (event) {
        $(event.currentTarget ).block({
            message: '<img src="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/loading.gif" align="absmiddle">',
            css: {
                border: 'none',
                padding: '2px',
                backgroundColor: 'none'
            },
            overlayCSS: {
                backgroundColor: '#000',
                opacity: 0.05,
                cursor: 'wait'
            }
        });
    },

    unblockUI: function (event) {
        $(event.currentTarget).unblock({
            onUnblock: function () {
                $(event.currentTarget).removeAttr("style");
            }
        });
    }

скрипка http://jsfiddle.net/leighking2/xn0yz33n/

или вы можете поместить его на весь вид с this.$el (что также означает, что вам не нужно передавать событие), как это

    blockUI: function () {
        $(this.$el).block({
            message: '<img src="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/loading.gif" align="absmiddle">',
            css: {
                border: 'none',
                padding: '2px',
                backgroundColor: 'none'
            },
            overlayCSS: {
                backgroundColor: '#000',
                opacity: 0.05,
                cursor: 'wait'
            }
        });
    },

    unblockUI: function () {
        $(this.$el).unblock({
            onUnblock: function () {
                $(this.$el).removeAttr("style");
            }
        });
    }

скрипка http://jsfiddle.net/leighking2/0osL8u6k/