- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这些 javascript 文件。了解 MVC 如何与 javascript 一起工作是一个非常小的测试项目。当我尝试单击“Delete Bloak”按钮时,除了 ID 为 100 的最后一个按钮外,没有任何反应。其他按钮没有附加任何单击事件。为什么?
Controller.js
var BloakController = function BloakController(model, view) {
this.model = model;
this.view = view;
}
BloakController.prototype.init = function init() {
this.view.onAddBloak = this.addBloak.bind(this);
this.view.onDeleteBloak = this.deleteBloak.bind(this);
this.view.onGetAllBloaks = this.getAllBloaks.bind(this);
}
BloakController.prototype.addBloak = function addBloak() {
}
BloakController.prototype.getAllBloaks = function getAllBloaks() {
this.model.getAllBloaks(this.getAllBloaksList.bind(this));
}
BloakController.prototype.getAllBloaksList = function getAllBloaksList(allBloaksList) {
for (var i = 0; i < allBloaksList.length; i++) {
var bloak = allBloaksList[i];
var bloakDataObjectModel = {
title: bloak.title,
body: bloak.body,
userId: bloak.userId,
id: bloak.id
};
this.view.render(bloakDataObjectModel);
}
}
BloakController.prototype.deleteBloak = function deleteBloak(id) {
this.model.deleteBloak(id, this.getAllBloaksList.bind(this));
}
模型.js
var BloakModel = function BloakModel(XMLHttpRequest) {
this.XMLHttpRequest = XMLHttpRequest;
}
BloakController.prototype.addBloak = function addBloak() {
}
BloakModel.prototype.getAllBloaks = function getAllBloaks(callback) {
var request = new this.XMLHttpRequest;
request.onload = function onLoad(e) {
var ajaxResponse = JSON.parse(e.currentTarget.responseText);
callback(ajaxResponse);
}
request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
request.send();
}
BloakModel.prototype.deleteBloak = function deleteBloak(id, callback) {
console.log(id);
var request = new this.XMLHttpRequest;
request.onload = function onLoad(e) {
var ajaxResponse = JSON.parse(e.currentTarget.responseText);
callback(ajaxResponse);
}
request.open('DELETE', 'https://jsonplaceholder.typicode.com/posts/' + id, true);
request.send();
}
View.js
var BloakView = function BloakView(domElement) {
this.domElement = domElement;
this.onAddBloak = null;
this.onDeleteBloak = null;
this.onGetAllBloaks = null;
}
BloakView.prototype.render = function render(bloakDataObjectModel) {
this.domElement.innerHTML += '<div class="bloakContainer"><h3>' + bloakDataObjectModel.title + '</h3><p class="bloakContent">' + bloakDataObjectModel.body + '</p><label class="bloakAuthor">' + bloakDataObjectModel.userId + '</label><br /><label class="bloakDate">' + bloakDataObjectModel.id + '</label><br /><input id=' + bloakDataObjectModel.id + ' type="button" value="Delete Bloak" /></div>';
var addBloakButton = document.getElementById('addBloakButton');
var deleteBloakButton = document.getElementById(bloakDataObjectModel.id);
addBloakButton.addEventListener('click', this.onAddBloak);
deleteBloakButton.addEventListener('click', this.onDeleteBloak);
}
App.js
var bloakModel = new BloakModel(XMLHttpRequest);
var targetElement = document.getElementById('bloaksContainer');
var bloakView = new BloakView(targetElement);
var bloakController = new BloakController(bloakModel, bloakView);
bloakController.init();
bloakController.getAllBloaks();
最佳答案
事实证明我完全错了,做了更多的研究,看起来使用 innerHTML
属性会导致所有子元素的破坏,read more about it here .无论哪种方式,所提供的解决方案仍然有效,事实证明我自己并不知道。
我应该意识到我一开始是错的,如果我是对的,那么你会得到一个错误,指出你不能将事件监听器附加到 null
或 undefined
,这是我犯下的糟糕、愚蠢的错误!
非常简短地查看了您的代码后,我认为可以肯定地说您的呈现函数有些错误,因为使用了 innerHTML
,它没有解析更新后的 HTML足够快让事件监听器工作......
亲自测试过,并完成了以下操作:
setTimeout(() => {
var addBloakButton = document.getElementById('addBloakButton');
var deleteBloakButton = document.getElementById(bloakDataObjectModel.id);
addBloakButton.addEventListener('click', this.onAddBloak);
deleteBloakButton.addEventListener('click', this.onDeleteBloak);
}, 10);
成功了。所以,如果你不想改变太多,你可以做我上面所做的,或者,你可以做一些类似的事情:
var div = document.createElement("div");
div.innerHTML = '<div class="bloakContainer"><h3>' + bloakDataObjectModel.title + '</h3><p class="bloakContent">' + bloakDataObjectModel.body + '</p><label class="bloakAuthor">' + bloakDataObjectModel.userId + '</label><br /><label class="bloakDate">' + bloakDataObjectModel.id + '</label><br /><input id=' + bloakDataObjectModel.id + ' type="button" value="Delete Bloak" /></div>';
this.domElement.append(div);
var addBloakButton = document.getElementById('addBloakButton');
var deleteBloakButton = div.querySelector('input[id*="' + bloakDataObjectModel.id + '"]');
addBloakButton.addEventListener('click', this.onAddBloak);
deleteBloakButton.addEventListener('click', this.onDeleteBloak);
此外,作为一种更可靠的方法,我会做的是在 View 中实现一个 onRender
函数,本质上说明 once 和 only once 所有 相关 HTML 已呈现,然后触发 onRender
方法。 或者可能像view.dispatchEvents
等等...特别是在这个例子中,我会在 Controller 中运行这样的函数,所以一旦getAllBloaksList
已呈现所有相关数据,您可以然后 触发dispatchEvents
函数,如下所示:
// Within the controller part...
BloakController.prototype.getAllBloaksList = function getAllBloaksList(allBloaksList) {
for (var i = 0; i < allBloaksList.length; i++) {
var bloak = allBloaksList[i];
var bloakDataObjectModel = {
title: bloak.title,
body: bloak.body,
userId: bloak.userId,
id: bloak.id
};
this.view.render(bloakDataObjectModel);
}
this.view.dispatchEvents();
};
// .. Within the View part...
BloakView.prototype.dispatchEvents = function () {
var list = this.domElement.querySelectorAll(".bloakContainer");
var todo = this.onDeleteBloak;
list.forEach(function (div) {
var deleteButton = div.querySelector("input[type=button]");
deleteButton.onclick = function () {
todo(this.id);
};
});
};
// Controller.
var BloakController = function BloakController(model, view) {
this.model = model;
this.view = view;
};
BloakController.prototype.init = function init() {
this.view.onAddBloak = this.addBloak.bind(this);
this.view.onDeleteBloak = this.deleteBloak.bind(this);
this.view.onGetAllBloaks = this.getAllBloaks.bind(this);
};
BloakController.prototype.addBloak = function addBloak() {
// todo
};
BloakController.prototype.getAllBloaks = function getAllBloaks() {
this.model.getAllBloaks(this.getAllBloaksList.bind(this));
};
BloakController.prototype.getAllBloaksList = function getAllBloaksList(allBloaksList) {
for (var i = 0; i < allBloaksList.length; i++) {
var bloak = allBloaksList[i];
var bloakDataObjectModel = {
title: bloak.title,
body: bloak.body,
userId: bloak.userId,
id: bloak.id
};
this.view.render(bloakDataObjectModel);
}
this.view.dispatchEvents();
};
BloakController.prototype.deleteBloak = function deleteBloak(id) {
this.model.deleteBloak(id, this.getAllBloaksList.bind(this));
};
// Model.
var BloakModel = function BloakModel(XMLHttpRequest) {
this.XMLHttpRequest = XMLHttpRequest;
};
BloakController.prototype.addBloak = function addBloak() {
// todo
};
BloakModel.prototype.getAllBloaks = function getAllBloaks(callback) {
var request = new this.XMLHttpRequest;
request.onload = function onLoad(e) {
var ajaxResponse = JSON.parse(e.currentTarget.responseText);
callback(ajaxResponse);
}
request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
request.send();
};
BloakModel.prototype.deleteBloak = function deleteBloak(id, callback) {
console.log(id);
var request = new this.XMLHttpRequest;
request.onload = function onLoad(e) {
var ajaxResponse = JSON.parse(e.currentTarget.responseText);
callback(ajaxResponse);
}
request.open('DELETE', 'https://jsonplaceholder.typicode.com/posts/' + id, true);
request.send();
};
// View.
var BloakView = function BloakView(domElement) {
this.domElement = domElement;
this.onAddBloak = null;
this.onDeleteBloak = null;
this.onGetAllBloaks = null;
};
BloakView.prototype.render = function render(bloakDataObjectModel) {
this.domElement.innerHTML += '<div class="bloakContainer"><h3>' + bloakDataObjectModel.title + '</h3><p class="bloakContent">' + bloakDataObjectModel.body + '</p><label class="bloakAuthor">' + bloakDataObjectModel.userId + '</label><br /><label class="bloakDate">' + bloakDataObjectModel.id + '</label><br /><input id=' + bloakDataObjectModel.id + ' type="button" value="Delete Bloak" /></div>';
}
BloakView.prototype.dispatchEvents = function() {
var list = this.domElement.querySelectorAll(".bloakContainer");
var todo = this.onDeleteBloak;
var addBloakButton = document.getElementById('addBloakButton');
addBloakButton.addEventListener('click', this.onAddBloak);
list.forEach(function(div) {
var deleteButton = div.querySelector("input[type=button]");
deleteButton.onclick = function() {
todo(this.id);
};
});
};
// App.
var bloakModel = new BloakModel(XMLHttpRequest);
var targetElement = document.getElementById('bloaksContainer');
var bloakView = new BloakView(targetElement);
var bloakController = new BloakController(bloakModel, bloakView);
bloakController.init();
bloakController.getAllBloaks();
<button id="addBloakButton">Add</button>
<div id="bloaksContainer">
<!-- DHTML -->
</div>
关于Javascript MVC,addEventListener 不能附加到 dom 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54520476/
我是 javascript 的新手(今天开始弄乱它)。 我正在尝试更改名为“bar”的元素(div)的高度。条形图将成为图表的一部分。 我可以毫无问题地将按钮连接到更改栏高度的函数。一切正常,除了条形
错误 -> “UIVIew”没有名为“addSubView”的成员 override func viewDidLoad() { super.viewDidLoad() // Do an
我在命令行工具项目中复制并粘贴了 main.swift 下面链接中的代码。 How do you use CGEventTapCreate in Swift? 它构建没有错误,但是当我运行时, gua
我在尝试编译我的代码时遇到以下错误。 ERROR! ..\myCode\CPOI.cpp:68:41: error: cannot dynamic_cast 'screenType' (of type
我正在尝试将多个字符串连接到一个我已为其分配内存的字符串指针。这是一个例子: char *finalNumString = malloc(sizeof(char)*1024); finalNumStr
我在使用 dup2() 和 pipe() 时遇到问题。 当我尝试将管道的写入端 dup2 到 STDOUT_FILENO 时,我收到了 EBADF。 我用 gdb 在 dup2(pout[1], ST
首先,我应该说我运行的是 Windows 7。 因此,今天早上我尝试像往常一样从我的存储库中提取数据,但我做不到。我得到了错误: The authenticity of host 'github.co
刚开始在虚拟环境中运行Python,乱用Django,无法激活虚拟环境。 花了最后 4 个小时尝试在本地终端/VS 代码上激活虚拟环境 (venv),但没有成功。 避免使用“sudo pip inst
Tidyverse 的粉丝经常给出使用小标题而不是数据框的几个优点。它们中的大多数似乎旨在保护用户免于犯错误。例如,与数据框不同,小标题: 不需要 ,drop=FALSE不从数据中删除维度的论据。 不
我一直在对 Elm 应用程序进行 docker 化时遇到问题。据我所知,我已经创建了一个完整且有效的 Docker 文件……但它不起作用。 我会解释的。 所以我的脚本在 3 个文件中运行。 首先是启动
我可以在 Controller 中使用@Autowired,例如 @RestController public class Index { @Autowired HttpServlet
我定义了一个方法和一个函数: def print(str:String) = println val intToString = (n:Int) => n.toString 现在我想创作它们。 我的问
当我控制台单独记录变量“pokemons”时,它确实返回一个数组。但是当我尝试映射它时,出现错误: TypeError: pokemons.map is not a function 我的代码: im
每当我尝试在 Python 解释器中导入 smtplib 时,都会收到此错误: ImportError: cannot import name fix_eols 我该如何解决这个问题? 编辑:这是完整
我正在使用 Meteor.js 开发一个项目,但在使用 Handlebar 时遇到了一些问题:我想检索集合的最后一项,并显示字段:其中包含 html 的文本: 这是我的javascript代码: Te
你好,我想使用 Service 实现 GestureDetector 但是我有这个错误The method onTouchEvent(MotionEvent) of type GestureServi
我正在尝试在 Controller bean 中 Autowiring 接口(interface) 在我放置的上下文配置文件中 和 我的 Controller 类是 @Controller pub
我试图在 mainwindow.cpp 中包含 QtSvg,但是当我编译时它说无法打开包含文件:QtSvg。我已经在我的 *.pro 文件中添加了这个(QT += svg)。我可以知道可能是什么问题吗
鉴于以下 PostgreSQL 代码,我认为这段代码不容易受到 SQL 注入(inject)攻击: _filter 'day' _start 1 _end 10 _sort 'article_name
我想执行以下操作。这在 MySQL 中是非法的。 PostGRESQL 中关联的 CTE(“with”子句)有效。这里的假设是 MySQL 中的子查询不是完全限定的 CTE。 请注意:这个查询显然非常
我是一名优秀的程序员,十分优秀!