如何实施自定义确认模式

Question

我正在尝试使用骨干j来实现Modal窗口，但是当我运行代码时，它每次都会进行搜索。我以为我可以创建一个变量并为其分配1或0，并在我的代码中检查它，但我似乎无法正确访问它。

以下是我的两个文件：的 ModalView.js

var modalTemplate = "<div id=\"pivotModal\" class=\"modal\">" +
        "<div class=\"modal-header\"><h3><%- title %></h3><button class=\"dtsBtn close\">Close</button></div>" +
    "<div class=\"modal-body\"><h3>Are you sure you want to remove <strong>all</strong> results from your query?</h3></div>" +
    "<div class=\"modal-footer\"><button " +
    "class=\"dtsBtn cancel\">Cancel</button><button " +
    "class=\"dtsBtn confirm\">Confirm</button></div>" +
    "</div>" +
    "<div class=\"modal-backdrop\"></div>";

var ModalView = Backbone.View.extend({

    defaults: {
        title: 'Not Set',
        isConfirmed: '0'
    },

    initialize: function (options) {
        this.options = options;
        this.options = _.extend({}, this.defaults, this.options);
        this.template = _.template(modalTemplate);
        console.log('Hello from Modal View: ' + this.options.title);
    },

    events: {
        'click .close': 'close',
        'click .cancel': 'cancel',
        'click .modal-backdrop': 'close',
        'click .confirm': 'confirm',
    },


    render: function () {
        var data = {title: this.options.title}
        this.$el.html(this.template(data));
        return this;
    },

    show: function () {
        $(document.body).append(this.render().el);
    },

    close: function () {
        console.log('Closed');
        this.unbind();
        this.remove();
    },

    cancel: function () {
        console.log('Cancelled');
        this.unbind();
        this.remove();
    },

    confirm: function () {
        console.log('Confirmed');
        this.options.isConfirmed = 1;
        console.log(this.options.isConfirmed)
        this.unbind();
        this.remove();
    }

});

modal_test.js（运行上面的代码）：

$('.clearAll').on("click", function(e) {
    e.preventDefault();
    var _title = "Confirm Action";
    //pass the value of the item we clicked on to the title variable
    var modal = new ModalView({ title : _title });
    modal.show();
    if (modal.isConfirmed === 1) {
        console.log("Confirmed equals 1")
        clearAllSearch.startSearch();
        masterSearch.startSearch();
    }
});

一切都是独立运作的，但我无法运行if语句。

Answer 1

如何实施自定义确认模式

实现模态的一种方法是将回调函数传递给视图。

ModalView.show({
    title: _title,
    callback: function(confirmed) {
        if (!confirmed) return; // early return
        console.log("User confirmed")
        clearAllSearch.startSearch();
        masterSearch.startSearch();
    }
});

视图的实现方式如下：

var ModalView = Backbone.View.extend({
    template: _.template(modalTemplate),
    events: {
        'click .close': 'close',
        'click .cancel': 'close',
        'click .modal-backdrop': 'close',
        'click .confirm': 'confirm',
    },
    initialize: function (options) {
        this.options = _.extend({ title: 'Are you sure?' }, options);
    },
    render: function () {
        this.$el.html(this.template(this.options));
        return this;
    },
    show: function () {
        $(document.body).append(this.render().el);
        return this;
    },
    close: function () {
        this.remove();
        var cb = this.options.callback;
        if (cb) cb(false);
    },

    confirm: function () {
        this.remove();
        var cb = this.options.callback;
        if (cb) cb(true);
    }
}, {
    // Static function
    show: function(options) {
        return new ModalView(options).show();
    }
});

使用承诺

您可以使用Promise代替回调，但它尚未在所有浏览器中使用。一个简单的替代方法是使用jQuery deferred，jQuery实现承诺。

    initialize: function(options) {
        this.options = _.extend({ title: 'Are you sure?' }, options);
        this.deferred = $.Deferred();
    },
    show: function () {
        $(document.body).append(this.render().el);
        return this.deferred;
    },
    close: function () {
        this.remove();
        this.deferred().reject();
    },

    confirm: function () {
        this.remove();
        this.deferred().resolve();
    }

它将标准化处理异步确认的方式。

ModalView.show({ title: _title }).then(function() {
    console.log("User confirmed")
    clearAllSearch.startSearch();
    masterSearch.startSearch();
});

您的代码中有什么用？

看起来您正在调用modal.isConfirmed，但模态视图类将isConfirmed放入options属性。

this.options = _.extend({}, this.defaults, this.options);

如果您使用modal.options.isConfirmed，它可能会返回正确的值，但您可以在视图上创建一个简单的访问器函数。

isConfirmed: function() {
    return this.options.isConfirmed;
}

由于isConfirmed是布尔标志，因此您应将其设置为true，而不是0或1之类的任意整数。

然后你可以调用if (modal.isConfirmed())并返回正确的值。

尽管如此，你还有另一个问题：显示模态的那一刻以及用户与模态交互的那一刻是异步。

var modal = new ModalView({ title : _title });
modal.show();
// This will always be false since the user hasn't clicked anything yet.
if (modal.isConfirmed === 1) {

这是通过首先显示的回调技术修复的。

其他可能的改进

在定义类时，每次实例化模态视图时都会创建模板函数。

var ModalView = Backbone.View.extend({
    template: _.template(modalTemplate), // define the template here
    initialize: function (options) {
        // this.options = options; // useless line
        this.options = _.extend({}, this.defaults, options);
    },

如何检查用户是否确认了自定义模式对话框

1 个答案:

如何实施自定义确认模式

使用承诺

您的代码中有什么用？

其他可能的改进