AC的单向数据绑定简单实现

老油条 · *发表于 2015-11-26 13:15:46*

本帖最后由老油条于 2015-11-26 13:58 编辑

提示：主要是用于探索研究交流；
前提：CSS3有一个content属性，在使用attr(xxx),那么该数据就具备父元素xxx属性的内容；
基于以上实现，可以做到数据的简单绑定；在此我就说输入到显示的绑定吧；
有的label，有的是p来绑定，那我们怎么做呢？
首先来一个样式：
*:before{
content: attr(ac-data);
}
那么可以看出来，现实数据是ac-data的内容。如果该闭包元素不包括这个属性是不会受影响的；
怎么绑定呢：既然是apicloud，那么我们来一个ac-bind,ac-model;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
[ac-bind]:before {
content: attr(ac-data);
}
</style>
<body>
<div ac-bind='name'>
</div>
<label ac-bind='name'>
</label>
<div ac-bind='nam1'>
</div>
<input ac-model='name' placeholder="xxx">
<input ac-model='nam1' placeholder="xxx">
</body>
<script type="text/javascript">
(
function(window) {
window.init = function() {
var models = document.querySelectorAll('[ac-model]');
for (var i = 0; i < models.length; i++) {
(function(i) {
var binds = document.querySelectorAll('[ac-bind=' + models[i].getAttribute('ac-model') + ']')
models[i].onkeyup = function() {
if (binds.length != 0) {
for (var j = 0; j < binds.length; j++) {
(function(j) {
binds[j].setAttribute('ac-data', models[i].value)
})(j)
}
}
}
})(i)
}
}
}
)(window)
init()
</script>
</html>

复制代码

有人说，用onchenge事件就可以自己写单向绑定，对的，是这样的，我也只是提供一种思路而已，祝ac越来愈好