BiSheng.js - 数据双向绑定库


MIT
跨平台
JavaScript

软件简介

不推荐继续使用,请移步 brix-bisheng

BiSheng.js 是纯粹的数据双向绑定库。

BiSheng.js
的名称源自活字印刷术的发明者“毕昇”。因为单向绑定犹如“刻版印刷”,双向绑定犹如“活字印刷”,故名
BiSheng.js。

快速开始

  1. 下载 BiSheng.js

    bower install bishengjs
    
  2. 引入 BiSheng.js

    <script src="./bower_components/bishengjs/dist/bisheng.js"></script>
    
  3. 使用

    // HTML 模板
    

    var tpl = ’{{title}}’
    // 数据对象
    var data = {
      title: ‘foo’
    }
    // 执行双向绑定
    BiSheng.bind(data, tpl, function(content){
      // 然后在回调函数中将绑定后的 DOM 元素插入文档中
      $(‘div.container’).append(content)
    });
    // 改变数据 data.title,对应的文档区域会更新
    data.title = ‘bar’

目录

代码的结构 按照职责来设计,见下表; 打包后的文件
dist/ 目录下; API 和文档
doc/ 目录下; 测试用例
test/ 目录下,基本覆盖了目前已实现的功能。

源文件 职责 & 功能
[src/ast.js](https://github.com/thx/bisheng/tree/master/src/ast.js) 修改语法树,插入定位符。
[src/bisheng.js](https://github.com/thx/bisheng/tree/master/src/bisheng.js) 双向绑定的入口。
[src/expose.js](https://github.com/thx/bisheng/tree/master/src/expose.js) 模块化,适配主流加载器。
[src/flush.js](https://github.com/thx/bisheng/tree/master/src/flush.js) 更新 DOM 元素。
[src/html.js](https://github.com/thx/bisheng/tree/master/src/html.js) 转换 HTML 字符串为 DOM 元素。
[src/locator.js](https://github.com/thx/bisheng/tree/master/src/locator.js) 生成定位符,解析、更新定位符的属性。
[src/loop.js](https://github.com/thx/bisheng/tree/master/src/loop.js) 数据属性监听工具。
[src/scan.js](https://github.com/thx/bisheng/tree/master/src/scan.js) 扫描 DOM 元素,解析定位符。