數(shù)據(jù)綁定
數(shù)據(jù)綁定是使用填充數(shù)據(jù)(XCO對象)，對綁定標(biāo)記進(jìn)行替換和頁面渲染。
1. 使用示例
設(shè)置綁定標(biāo)記
<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請求返回的填充數(shù)據(jù)
<?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>
方法調(diào)用
<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' ]; // 聲明綁定標(biāo)記的容器
XCODataBind.pretreatment(bindConfig); // 對綁定標(biāo)記進(jìn)行預(yù)處理
function doBind() {
var xco = new XCO();
XCODataBind.bind({ // 綁定數(shù)據(jù)
url : "/m3.xco", // XCO請求的URL
extendedFunction : { // 函數(shù)容器對象
getState : function(xco){ // 對應(yīng)函數(shù)替換標(biāo)記中的函數(shù)
if(1 == xco.get('state')){
return '<b>已認(rèn)證</b>';
} else {
return '<a href="/toCertify.jsp?id=' + xco.get('id') + '">去認(rèn)證</a>';
}
}
}
});
}
function getAgeLevel(age){ // 變量替換之函數(shù)調(diào)用
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>已認(rèn)證</b></p> </div>
類庫說明
xco.variable-1.0.1.js標(biāo)記解析類庫xco.databinding-1.0.1.js數(shù)據(jù)綁定類庫
2. 綁定標(biāo)記容器的聲明
在使用數(shù)據(jù)綁定的時候，需要先聲明綁定標(biāo)記的容器，比如：
var bindConfig = [ '#p1', '#p2', '#p3', '#p4', '.c2' ]; // 聲明綁定標(biāo)記的容器
其中#p1代表ID為p1的HTML元素，.c2標(biāo)識CLASS為c2的HTML元素；因為數(shù)據(jù)綁定中，HTML元素的查找是基于JQuery的，因此具體的查找表達(dá)式，可參考JQuery選擇器中的表達(dá)式。
3. 變量標(biāo)記和函數(shù)標(biāo)記
數(shù)據(jù)綁定中的標(biāo)記同樣支持變量標(biāo)記和函數(shù)標(biāo)記，具體的可參考模板引擎章節(jié)的內(nèi)容。
4. 屬性綁定
數(shù)據(jù)綁定不僅可以綁定HTML中的內(nèi)容，同樣可以綁定HTML元素的屬性。
設(shè)置綁定標(biāo)記
<a id="p5" href="toCertify.jsp?id=#{id}">#{name}</a>
填充數(shù)據(jù)
<?xml version="1.0" encoding="UTF-8"?> <X> <L K="id" V="185"/> <S K="name" V="張三"/> </X>
方法調(diào)用
var bindConfig = [ {el : '#p5', attr: ['href', 'html']} ]; // 聲明綁定標(biāo)記的容器 XCODataBind.pretreatment(bindConfig); // 對綁定標(biāo)記進(jìn)行預(yù)處理
var xco = new XCO(); XCODataBind.bind({ // 綁定數(shù)據(jù) url : "/m3.xco", // XCO請求的URL });
渲染后的HTML
<a id="p5" href="toCertify.jsp?id=185">張三</a>
說明
之前我們聲明一個綁定標(biāo)記容器的時候，只需要一個ID或者CLASS即可，為什么這里需要如此復(fù)雜呢？其實這里的聲明，才是對于一個HTML元素完整的聲明，比如：
{el : '#p5', attr: ['href', 'html']}
其中el代表該元素的查詢表達(dá)式，attr代表綁定標(biāo)記位于該元素的那些屬性中。之前的申明#p1，只是一種簡化的方式，其完整的表示應(yīng)該是：
{el : '#p1', attr: 'html'}
5. 命名空間
在一個頁面中，假設(shè)我們需要展示兩部分信息，一部分是用戶基本信息，一部分是用戶的資金信息，這兩部分的數(shù)據(jù)是分別獲取的?；谶@種場景下，數(shù)據(jù)綁定引入了命名空間的概念。命名空間就是填充數(shù)據(jù)所對應(yīng)的綁定標(biāo)記的集合。下面我們看一個完整的示例。
設(shè)置綁定標(biāo)記
<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>
方法調(diào)用
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({ // 綁定數(shù)據(jù) url : "/m3.xco", // XCO請求的URL extendedFunction : { // 函數(shù)容器對象 getState : function(xco){ // 對應(yīng)函數(shù)替換標(biāo)記中的函數(shù) if(1 == xco.get('state')){ return '<b>已認(rèn)證</b>'; } else { return '<a href="/toCertify.jsp?id=' + xco.get('id') + '">去認(rèn)證</a>'; } } } }); XCODataBind.bind({ ns : 'xx', url : "/m4.xco" }); }
XCO請求返回的填充數(shù)據(jù)
/m3.xco請求的返回結(jié)果：
<?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請求的返回結(jié)果：
<?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>已認(rèn)證</b></p> </div>
<div> <p id="p6">用戶積分:100</p> <p id="p7">用戶資金:100$</p> </div>
說明
在之前的示例中，我們在bind的時候通過ns:'xx'設(shè)置了命名空間，在綁定標(biāo)記中通過#{xx:score}使用了命名空間。其實，之前的示例中還隱含的存在另一個命名空間，一個空的命名空間，也就是默認(rèn)的命名空間。在bind的時候沒有明確指的ns，將使用默認(rèn)命名空間，在綁定標(biāo)記中為通過前綴xx|明確的指定命名空間也將使用默認(rèn)的命名空間。
更多建議：