gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 02:26:16 25 4
gpt4 key购买 nike

我正在尝试使用backbone js来实现模态窗口,但是当我运行代码时,它每次都会进行搜索。我以为我可以创建一个变量并为其分配 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 语句。

最佳答案

如何实现自定义确认模式

实现模式的一种方法是将回调函数传递给 View 。

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

View 的实现方式如下:

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

除了回调之外,您还可以使用 Promise但它还不能在所有浏览器中使用。一个简单的替代方法是使用 jQuery deferred , jQuery 对 Promise 的实现。

    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,它可能会返回正确的值,但您可以在 View 上创建一个简单的访问器函数。

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

由于 isConfirmed 是一个 bool 标志,因此您应该将其设置为 true,而不是像 01 这样的任意整数.

然后你可以调用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);
},

关于javascript - 如何检查用户是否确认自定义模式对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48935089/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com