数据绑定_w3cschool

数据绑定是使用填充数据(XCO对象)，对绑定标记进行替换和页面渲染。

1. 使用示例

设置绑定标记

<div> <p id="p1">用户ID:#{id}</p> <p id="p2">用户昵称:#{name|'无名'}</p> <p id="p3">年龄层次:#{age@getAgeLevel}</p> <p id="p4">注册时间:#{create_time@formatDateTime}</p> <p class="c2">@{getState}</p> </div>

XCO请求返回的填充数据

<?xml version="1.0" encoding="UTF-8"?> <X> <L K="id" V="185"/> <S K="name" V="张三"/> <I K="age" V="18"/> <I K="state" V="1"/> <A K="create_time" V="2017-08-05 15:23:58"/> <I K="$$CODE" V="0"/> </X>

方法调用

渲染后的HTML

类库说明

xco.variable-1.0.1.js 标记解析类库
xco.databinding-1.0.1.js 数据绑定类库

2. 绑定标记容器的声明

在使用数据绑定的时候，需要先声明绑定标记的容器，比如：

var bindConfig = [ '#p1', '#p2', '#p3', '#p4', '.c2' ]; // 声明绑定标记的容器

其中#p1代表ID为p1的HTML元素，.c2标识CLASS为c2的HTML元素；因为数据绑定中，HTML元素的查找是基于JQuery的，因此具体的查找表达式，可参考JQuery选择器中的表达式。

3. 变量标记和函数标记

数据绑定中的标记同样支持变量标记和函数标记，具体的可参考模板引擎章节的内容。

4. 属性绑定

数据绑定不仅可以绑定HTML中的内容，同样可以绑定HTML元素的属性。

设置绑定标记

填充数据

<?xml version="1.0" encoding="UTF-8"?> <X> <L K="id" V="185"/> <S K="name" V="张三"/> </X>

方法调用

var bindConfig = [ {el : '#p5', attr: ['href', 'html']} ]; // 声明绑定标记的容器 XCODataBind.pretreatment(bindConfig); // 对绑定标记进行预处理

var xco = new XCO(); XCODataBind.bind({ // 绑定数据 url : "/m3.xco", // XCO请求的URL });

渲染后的HTML

说明

之前我们声明一个绑定标记容器的时候，只需要一个ID或者CLASS即可，为什么这里需要如此复杂呢？其实这里的声明，才是对于一个HTML元素完整的声明，比如：

{el : '#p5', attr: ['href', 'html']}

其中el代表该元素的查询表达式，attr代表绑定标记位于该元素的那些属性中。之前的申明#p1，只是一种简化的方式，其完整的表示应该是：


{el : '#p1', attr: 'html'}

5. 命名空间

在一个页面中，假设我们需要展示两部分信息，一部分是用户基本信息，一部分是用户的资金信息，这两部分的数据是分别获取的。基于这种场景下，数据绑定引入了命名空间的概念。命名空间就是填充数据所对应的绑定标记的集合。下面我们看一个完整的示例。

设置绑定标记

<div> <p id="p6">用户积分:#{xx:score}</p> <p id="p7">用户资金:#{xx:(money/100)+'$'}</p> </div>

方法调用

XCO请求返回的填充数据

/m3.xco请求的返回结果：

/m4.xco请求的返回结果：

<?xml version="1.0" encoding="UTF-8"?> <X> <L K="id" V="185"/> <L K="score" V="100"/> <L K="money" V="10000"/> <I K="$$CODE" V="0"/> </X>

渲染后的HTML

说明

在之前的示例中，我们在bind的时候通过ns:'xx'设置了命名空间，在绑定标记中通过#{xx:score}使用了命名空间。其实，之前的示例中还隐含的存在另一个命名空间，一个空的命名空间，也就是默认的命名空间。在bind的时候没有明确指的ns，将使用默认命名空间，在绑定标记中为通过前缀xx|明确的指定命名空间也将使用默认的命名空间。