|
本帖最后由 老油条 于 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越来愈好
|
|