数据绑定
数据绑定是使用填充数据(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>
方法调用
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/xco-1.0.1.js"></script>
<script type="text/javascript" src="/js/xco.jquery-1.0.1.js"></script>
<script type="text/javascript" src="/js/xco.variable-1.0.1.js"></script>
<script type="text/javascript" src="/js/xco.databinding-1.0.1.js"></script>
<script type="text/javascript">
var bindConfig = [ '#p1', '#p2', '#p3', '#p4', '.c2' ]; // 声明绑定标记的容器
XCODataBind.pretreatment(bindConfig); // 对绑定标记进行预处理
function doBind() {
var xco = new XCO();
XCODataBind.bind({ // 绑定数据
url : "/m3.xco", // XCO请求的URL
extendedFunction : { // 函数容器对象
getState : function(xco){ // 对应函数替换标记中的函数
if(1 == xco.get('state')){
return '<b>已认证</b>';
} else {
return '<a href="/toCertify.jsp?id=' + xco.get('id') + '">去认证</a>';
}
}
}
});
}
function getAgeLevel(age){ // 变量替换之函数调用
if(age < 20){
return '青年';
}
return '中年';
}
</script>
渲染后的HTML
<div>
<p id="p1">用户ID:185</p>
<p id="p2">用户昵称:张三</p>
<p id="p3">年龄层次:青年</p>
<p id="p4">注册时间:2017-08-05 15:30:59</p>
<p class="c2"><b>已认证</b></p>
</div>
类库说明
- 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选择器中的表达式。
4. 属性绑定
数据绑定不仅可以绑定HTML中的内容，同样可以绑定HTML元素的属性。
设置绑定标记
<a id="p5" href="toCertify.jsp?id=#{id}">#{name}</a>
填充数据
<?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
<a id="p5" href="toCertify.jsp?id=185">张三</a>
说明
之前我们声明一个绑定标记容器的时候，只需要一个ID或者CLASS即可，为什么这里需要如此复杂呢？其实这里的声明，才是对于一个HTML元素完整的声明，比如：
{el : '#p5', attr: ['href', 'html']}
其中el代表该元素的查询表达式，attr代表绑定标记位于该元素的那些属性中。之前的申明#p1，只是一种简化的方式，其完整的表示应该是：
{el : '#p1', attr: 'html'}
5. 命名空间
在一个页面中，假设我们需要展示两部分信息，一部分是用户基本信息，一部分是用户的资金信息，这两部分的数据是分别获取的。基于这种场景下，数据绑定引入了命名空间的概念。命名空间就是填充数据所对应的绑定标记的集合。下面我们看一个完整的示例。
设置绑定标记
<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>
<a id="p5" href="toCertify.jsp?id=#{id}">#{name}</a>
</div>
<div>
<p id="p6">用户积分:#{xx:score}</p>
<p id="p7">用户资金:#{xx:(money/100)+'$'}</p>
</div>
方法调用
var bindConfig = [ '#p1', '#p2', '#p3', '#p4', '.c2', {el : '#p5', attr: ['href', 'html']}, '#p6', '#p7'];
XCODataBind.pretreatment(bindConfig);
function doBind() {
var xco = new XCO();
XCODataBind.bind({ // 绑定数据
url : "/m3.xco", // XCO请求的URL
extendedFunction : { // 函数容器对象
getState : function(xco){ // 对应函数替换标记中的函数
if(1 == xco.get('state')){
return '<b>已认证</b>';
} else {
return '<a href="/toCertify.jsp?id=' + xco.get('id') + '">去认证</a>';
}
}
}
});
XCODataBind.bind({
ns : 'xx',
url : "/m4.xco"
});
}
XCO请求返回的填充数据
/m3.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>
/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
<div>
<p id="p1">用户ID:185</p>
<p id="p2">用户昵称:张三</p>
<p id="p3">年龄层次:青年</p>
<p id="p4">注册时间:2017-08-05 15:30:59</p>
<p class="c2"><b>已认证</b></p>
</div>
<div>
<p id="p6">用户积分:100</p>
<p id="p7">用户资金:100$</p>
</div>
说明
在之前的示例中，我们在bind的时候通过ns:'xx'设置了命名空间，在绑定标记中通过#{xx:score}使用了命名空间。其实，之前的示例中还隐含的存在另一个命名空间，一个空的命名空间，也就是默认的命名空间。在bind的时候没有明确指的ns，将使用默认命名空间，在绑定标记中为通过前缀xx|明确的指定命名空间也将使用默认的命名空间。