- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用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但它还不能在所有浏览器中使用。一个简单的替代方法是使用 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
,而不是像 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);
},
关于javascript - 如何检查用户是否确认自定义模式对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48935089/
TCP header 上的 32 位确认字段,比如 x告诉另一台主机“我收到了所有字节,直到并包括 x-1,现在期待来自 x 和 on 的字节”。在这种情况下,接收方可能已经收到了一些更多字节,比如
我正在使用 PyCharm 2020.2.3 不知不觉中我点击了下图中的复选框 现在,即使我的代码正在调试中,点击运行也会终止调试并开始运行代码。如何将其恢复为未选中状态?谢谢。 PS:我的“允许并行
我想知道何时使用 RabbitMQ 和 Spring Boot 接受 (ack) 或不接受 (nack) 消息。 我想将消息发送到队列(通过交换)并检查队列是否已接受该消息。实际上我想发送到两个不同的
我一直在寻找一种方法让用户确认 票在分配给他们之后。不知道有没有 这是一个内置功能,或者如果有一个插件 将为用户创建一个状态/按钮以接受票证 在它被放入队列之后。我希望 从附近的售票窗口看到类似的东西
我正在构建一个应用程序以通过 Xbee API 与 Xbee 模块通信。 目前我有一些工作,但它相当简单并且有很多限制。 Sub processPackets() ' this runs as its
我有一个复选框,更改后会自动发布。 自动发布对于两者(选中和未选中)都适用,但我想在每个事件发生之前弹出一个对话框进行确认。 到目前为止,当选中该复选框时,弹出框就会起作用。 但当取消选中该复选框时,
当我使用 UIGestureRecognizer ,例如,当用户向右滑动时,我想要一个 UIAlertView询问他是否真的要进行向右滑动的 Action 。 我曾尝试这样做,但没有成功。 最佳答案
我有一个 asp:CheckBoxList,我想显示一条警告消息仅在使用 jquery 取消选中复选框时。 $('.chklist').click( function () {
我想知道有什么可能的方法来确定我们的推送消息是否最终从 APNS 服务器传送。我已经想出了一些信息,如下所述 APNS 正在发送接受推送请求的响应代码,并可能给出错误代码(如果有)。例如:如果您的有效
我有此页面,我正在尝试确认输入文本字段中的日期与当前日期。如果输入字段中的日期晚于当前日期,则需要出现确认框以确认他们输入了正确的日期。因此,“确定”按钮需要完成数据提交,“取消”按钮需要将它们返回到
我有一个功能: function placeOrder(price, productList) { var bulletinBoardItem = Number(productList.box
我不明白为什么即使我点击“否”,这个confirm()调用也会被触发。你能告诉我我做错了什么吗? $('.deleteButton').livequery('click',function(){
我目前正在使用 dotmailer 生成一个新表单(简单的文本框和提交按钮),自动将电子邮件地址添加到 dotmailer 地址簿。 当有人提交电子邮件地址时 - 他们可以被带到网页。 我一直在尝试
这是不起作用的代码...它只是删除表单而不先提示。 $(".delete").click(function () { if(confirm('You honestly want to dele
我在我的程序中使用 aprgeparse 创建一个参数,允许用户从 amazon s3 存储桶中删除文件。我以这种方式创建它: parser.add_argument("-r", "--remove"
我正在努力学习 puppeteer 操作。我已经成功编写了登录页面和一些导航的脚本。然后我让它点击一个按钮。该页面抛出一个 window.confirm,我希望我的脚本接受它以继续下一步,但我不知
某网站实现了一个第三方插件,提示用户在删除前进行确认。 confirmDelete: function (event) { var go_ahead = confirm("Are you su
我想在 primefaces 的选择/取消选择复选框上显示确认对话框。我试过了 但它不起作用,因为 selectBooleanCheckBox 不可确认。是否有解决此问题的解决方法? 最
我们已经从 TFS 下载了一个项目,在恢复 Nuget 包后,我们收到以下错误: Error 5 The "ValidatePackageReferences" task could not
我有两个单独的 ul 列表:列表 A 和列表 B 由于 jQuery UI 插件,它们都可以排序。 我正在开发的项目的用户希望在项目从一个列表移动到另一个列表时确认操作,但在同一列表内移动时则不需要。
我是一名优秀的程序员,十分优秀!