apicloud apicloud

注册
查看: 2286|回复: 1

[案例源码] AC的单向数据绑定简单实现

主题:
124
帖子:
694
云币:
2454

[案例源码] AC的单向数据绑定简单实现

2286 1 | 发表于 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;
  1. <!DOCTYPE html>
  2. <html>

  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.         </head>
  7.         <style type="text/css">
  8.                 [ac-bind]:before {
  9.                         content: attr(ac-data);
  10.                 }
  11.         </style>

  12.         <body>
  13.                 <div ac-bind='name'>

  14.                 </div>
  15.                 <label ac-bind='name'>

  16.                 </label>
  17.                 <div ac-bind='nam1'>

  18.                 </div>
  19.                 <input ac-model='name' placeholder="xxx">
  20.                 <input ac-model='nam1' placeholder="xxx">
  21.         </body>
  22.         <script type="text/javascript">
  23.                 (
  24.                         function(window) {
  25.                                         window.init = function() {
  26.                                                 var models = document.querySelectorAll('[ac-model]');
  27.                                                 for (var i = 0; i < models.length; i++) {
  28.                                                         (function(i) {
  29.                                                                 var binds = document.querySelectorAll('[ac-bind=' + models[i].getAttribute('ac-model') + ']')
  30.                                                                 models[i].onkeyup = function() {                                       
  31.                                                                         if (binds.length != 0) {
  32.                                                                                 for (var j = 0; j < binds.length; j++) {
  33.                                                                                         (function(j) {
  34.                                                                                                 binds[j].setAttribute('ac-data', models[i].value)
  35.                                                                                         })(j)
  36.                                                                                 }
  37.                                                                         }
  38.                                                                 }
  39.                                                         })(i)
  40.                                                 }
  41.                                         }
  42.                         }
  43.                 )(window)
  44.                 init()
  45.         </script>

  46. </html>
复制代码


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

查看全部评分

主题:
1102
帖子:
5147
云币:
2147214901

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2015-11-26 13:29:49 |
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表