- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个 JS 框架来模拟 AngularJS 模型,仅用于教育目的。
事情是:我指定一个回调在模型(输入)更新时运行,但是在它们第一次运行后,它们“消失”。
在尝试使用 jQuery 执行此操作之前,我尝试使用 querySelectorAll 并遇到了同样的问题。
HTML
<div class="container" jd-app="test">
<input type="text" jd-model="name" value="foo" /><br />
<input type="text" jd-model="email" value="foo@foo" />
<hr />
<p>Name: {{ name }}</p>
<p>Email: {{ email }}</p>
</div>
JAVASCRIPT
(function($, window, document, undefined) {
'use strict';
// registering models
(function() {
var $app = $('[jd-app]');
var $models = $('[jd-model]', $app);
$models.each(function(index) {
UpdateModel.apply(this);
});
function UpdateModel() {
var model = { name: $(this).attr('jd-model'), value: this.value }
var re = new RegExp('{{\\s+('+ model.name +')\\s+}}', 'gm');
$('*', $app).each(function(index) {
var $this = $(this);
$this.text( $this.text().replace(re, model.value) );
});
$(this).on('keyup', UpdateModel);
}
})();
})(jQuery, window, document);
我做错了什么?有没有更好的方法来实现这一点?
最佳答案
您遇到的问题是,当您的脚本第一次看到 {{ name }} 时,它将其转换为模型“name”的值。但在你的 html 中,你有文本“foo”而不是 {{ name }} (你试图搜索/替换的东西),所以你无法更新显示的文本。
您需要做的是跟踪各个 DOM 节点(附加到特定模型),这些节点包含最初包含“{{ }}”的文本以及正确的模型名称。
我在这里想出了一种丑陋的原型(prototype):
我不确定它在识别正确的模板位置方面有多灵活,但它可以作为我正在谈论的实现类型的演示。另外 - 我猜效率不是很高。 (但是 angularjs 也不是真的......)
(function($, window, document, undefined) {
'use strict';
// From http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery
function getTextNodesIn(node, includeWhitespaceNodes) {
var textNodes = [], nonWhitespaceMatcher = /\S/;
function getTextNodes(node) {
if (node.nodeType == 3) {
if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
textNodes.push(node);
}
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
getTextNodes(node.childNodes[i]);
}
}
}
getTextNodes(node);
return textNodes;
}
// registering models
(function() {
var $app = $('[jd-app]');
var $models = $('[jd-model]', $app);
var models = [];
$models.each(function(index) {
registerModel.apply(this);
});
function registerModel() {
var model = { name: $(this).attr('jd-model'), value: this.value, domElements: [] };
var re = new RegExp('{{\\s+('+ model.name +')\\s+}}', 'gm');
$app.contents().each(function(index) {
if ($(this).text().match(re)) {
var textNodes = getTextNodesIn(this, false);
console.log(textNodes);
$.each(textNodes, function(index, elem) {
if (elem.nodeValue.match(re)) {
var text = elem.nodeValue;
var myArray = re.exec(text);
var match = myArray[0];
var firstIndex = text.indexOf(match);
var newElem = elem.splitText(firstIndex);
newElem.splitText(match.length);
model.domElements.push(newElem);
}
});
}
});
models.push(model);
$(this).on('keyup', updateModel);
$(this).trigger('keyup');
}
function updateModel() {
var $input = $(this);
$.each(models, function(index, model) {
if (model.name === $input.attr('jd-model')) {
var newVal = $input.val();
$.each(model.domElements, function(index, elem) {
elem.nodeValue = newVal;
});
}
});
}
})();
})(jQuery, window, document);
关于javascript - jQuery事件回调只运行一次(类似Angular的框架开发),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25000889/
学习SQL。有一个简单的带有字段标题的桌面游戏。我想根据标题进行搜索。如果我有一款名为 Age of Empires III: Dynasties 的游戏,并且我使用 LIKE 和参数 Age of
我正在尝试为以下数据结构创建镜头。我正在使用lens-family . data Tree = Tree { _text :: String, _subtrees ::
我发现很难理解这一点。比如说,在 Python 中,如果我想要一个根据用户输入在循环中修改的列表,我会有这样的内容: def do_something(): x = [] while(
我有一个像这样的 mysql 查询 SELECT group_name FROM t_groups WHERE group_name LIKE '%PCB%'; 结果是 group_name ----
我的数据库表中有超过一百万条记录。当我使用like时非常慢,当我使用match against时他们丢失了一些记录。 我创建帮助表: 标签列表 tag_id tag_name tag_rel_me
我在我的一个 Java 项目中使用 JXBrowser 来简单显示 googlemaps 网页,以便我可以在那里跟踪路线,但最近我想改进该项目,但我的问题是 JXBrowser 的许可证过期(只有一个
小问题:如何将 mysql_escape_string 变量包含在 like 子句中? "SELECT * FROM table WHERE name LIKE '%". %s . "%'" 或
我尝试使用几个jquery消息插件,例如alertify . 但我注意到的主要事情是系统消息框会停止后台功能,直到用户响应。其他插件没有此功能。 有没有办法将此功能添加到 jquery 插件中?可以扩
我是 Ruby 新手。我过去使用过 shell。我正在将 shell 程序转换为 ruby。我有以下命令 cmd="cat -n " + infile + " | grep '127.0.0.1
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
当我研究 Rust 时,我试图编写一个 Rust 函数来查看任何可迭代的字符串。 我最初的尝试是 fn example_1(iter: impl Iterator); fn example_2(ite
我必须在我的项目中使用代码拆分。但无论如何,第一次初始下载有一些代码。 现在我想向最终用户展示代码下载(.cache.html - 或其他代码拆分)的进度,例如 gmail 启动进度。 请你帮帮我。
我今天找到了一个错误,它最终是由我代码中的以下片段引起的(我试图在列表中仅过滤“PRIMARY KEY”约束): (filter #(= (% :constraint_type "PRIMARY KE
我正在尝试在关键字段上实现检查约束。关键字段由 3 个字符的前缀组成,然后附加数字字符(可以手动提供,但默认是从序列中获取整数值,然后将其转换为 nvarchar)。关键字段定义为 nvarhcar(
我正在尝试使用以下方式创建 List 实例: List listOne = new ArrayList(); List listTwo = new ArrayList(){}; List listTh
我过去曾为 iOS 开发过,最近转向了 mac 开发。我开始了一个“感受”事物的项目,但遇到了一个问题。我试图创建一个 NSTableView 来显示多个项目,包括一个标签、一个 2 UIImageV
我正在尝试编写一个查询,该查询将返回哪些主机缺少某个软件: Host Software A Title1 A
AFAIK,在三种情况下别名是可以的 仅限定符或符号不同的类型可以互为别名。 struct 或 union 类型可以为包含在其中的类型设置别名。 将 T* 转换为 char* 是可以的。 (不允许相反
\s 似乎不适用于 sed 's/[\s]\+//' tempfile 当它为工作时 sed 's/[ ]\+//' tempfile 我正在尝试删除由于命令而出现在每行开头的空格: nl -s ')
我正在使用 ocamlgraph 在 ocaml 中编写程序,并想知道是否要将其移植到 F# 我有哪些选择?谢谢。 最佳答案 QuickGraph .Net 最完整的图形库之一 关于F# 图形库(类似
我是一名优秀的程序员,十分优秀!