前言

發現大家對于我從 json 文件中直接操作節點屬性來控制界面的動態變化感到比較好奇，所以這篇就針對數據綁定以及如何使用這些綁定的數據做一篇說明，我寫了一個簡單的例子，基于機房工控的服務器上設備的燈閃爍現象。我們從 2d 和 3d 兩個角度來分析數據綁定的問題。

效果圖

2d

代碼實現

其實不管是 2d 還是 3d，在 HT 中，數據綁定不分維度的，所以兩者在實現上非常類似。

代碼下載地址：https://download.csdn.net/download/u013161495/10290996

繪制設備

2d 和 3d 中的設備都是基于下面這張用“矢量”繪制的一個機柜內部設備，并且對這個矢量的“閃爍燈”部分加了數據綁定，具體綁定了“閃爍燈”的背景顏色以及陰影顏色，改變陰影顏色是為了讓“燈”有“發光”的效果，下圖中的紅色方框即為“閃爍燈”。

首先我們必須清楚如何繪制矢量（http://hightopo.com/guide/guide/core/vector/ht-vector-guide.html）？我們這個 Demo 的整體的矢量繪制比較復雜，我就只說一下上圖中的“燈”矩形框和文本是怎么繪制的。

我們知道，繪制一個矢量 json 必須包含以下三個參數：

• width 矢量圖形的寬度
• height 矢量圖形的高度
• comps 矢量圖形的組件 Array 數組，每個數組對象為一個獨立的組件類型（http://hightopo.com/guide/guide/core/vector/ht-vector-guide.html#ref_type），數組的順序為組件繪制先后順序 每個元素肯定都是要寬度和高度的，這兩個屬性不做說明，comps 這個屬性倒是挺厲害的，上面第三點中提到了，這是一個數組，繪制圖形和文本的實際操作如下：

{"width": 48,//矢量整體寬度"height": 262,//矢量整體高度"comps": [{"type": "text",//文本"text": "端口3",//文本內容"align": "center",//文本對齊方式"color": "rgb(255,255,255)",//字體顏色"font": "8px arial, sans-serif",//文本字體大小"rect": [//組件繪制在矢量中的矩形邊界18.28654,//x 軸坐標39.80679,//y 軸坐標27.82265,//width11.5434//height]},{"type": "rect",//矩形"background": "rgb(255,0,0)",//屬性默認值"shadow": true,//設置為true顯示陰影"shadowOffsetX": 0,//選中圖元的陰影水平偏移"shadowOffsetY": 0,//選中圖元的陰影垂直偏移"rect": [//組件繪制在矢量中的矩形邊界4.38544,//x 軸坐標32.55505,//y 軸坐標14.46481,//width6.1554//height]}] } 復制代碼

這段代碼繪制了一個矩形和一個文本。

繪制完矢量之后，我們就可以通過給節點設置圖片的方式來顯示這個矢量。當然上面繪制的矢量并不是全部的繪制矢量的代碼，具體內容請參考：download.csdn.net/download/u0…

要動態改變一個節點的屬性，那么肯定要先獲取到這個節點，我們可以通過遍歷數據模型 DataModel，或者通過 tag 標簽獲取節點，又或者通過鼠標點擊事件等等。這個 Demo 中需要操作的節點比較多，所以我選擇用遍歷數據模型的方法來獲取節點。那么問題來了，我怎么通過一張圖片或者一個矢量定位這個節點？如果節點都沒有創建，也不可能獲取到圖片對應的節點（或者說如果直接把這個矢量圖拿來作為一個節點的圖片，有可能出現的情況就是，六個設備的變化情況都一模一樣！畢竟是同一個節點！）。所以我們得把這些特殊的部分從圖片中刪除掉，然后在對應的位置填充上節點，再給節點設置上設備的矢量圖。先把對應位置的矢量圖刪除掉，如下圖紅框部分：

我們在紅框部分單獨創建八個設備節點，并給這八個節點分別設置同一張矢量圖。誒？你可能會詫異為什么同一張圖顯示卻不同（燈亮的變化順序不同），下面我們來看看這是怎么完成的。

那么這八個擁有相同矢量圖的設備是如何通過代碼控制閃爍燈隨機變化的呢？關鍵就在我們上面繪制的矢量圖中，前面有意略過了這部分：數據綁定。

數據綁定

由于燈閃爍是通過設置矩形的背景顏色來實現的（當然我這里還加了一個陰影，為了有“亮燈”的效果），所以我們對這個矩形的背景顏色屬性進行數據綁定，然后通過 data.a 方法獲取和設置屬性值。

{"type": "rect",//矩形"background": {//矩形背景"func": "attr@rectBg2",//數據綁定string類型若以attr@***開頭，則返回data.getAttr(***)值，其中***代表attr的屬性名"value": "rgb(255,0,0)"//屬性默認值},"shadow": true,//設置為true顯示陰影"shadowColor": {//陰影顏色"func": "attr@shadowColor2",//數據綁定string類型"value": "rgba(255,0,0,0.35)"//屬性默認值},"shadowOffsetX": 0,//選中圖元的陰影水平偏移"shadowOffsetY": 0,//選中圖元的陰影垂直偏移"rect": [//組件繪制在矢量中的矩形邊界4.38544,//x 軸坐標32.55505,//y 軸坐標14.46481,//width6.1554//height] } 復制代碼

上面是我對矩形燈矢量的部分重新繪制后的代碼，看出什么不同了？對，background 屬性和 shadowColor 屬性都出現了兩個值，并且這兩個值看起來“怪怪的”？數據綁定（http://hightopo.com/guide/guide/core/databinding/ht-databinding-guide.html）沒有那么難，綁定的格式很簡單，只需將以前的參數值用一個帶 func 屬性的對象替換即可，如果對應的 func 取得的值為 undefined 或 null 時，則會采用 value 屬性定義的默認值。

func 的內容有以下幾種類型：

• function 類型，直接調用該函數，并傳入相關 Data 和 view 對象，由函數返回值決定參數值，即 func(data, view) 調用。
• string 類型：
  • style@*** 開頭，則返回 data.getStyle(***) 值，其中 *** 代表 style 的屬性名。
  • attr@*** 開頭，則返回 data.getAttr(***) 值，其中 *** 代表 attr 的屬性名。
  • field@*** 開頭，則返回 data.*** 值，其中 *** 代表 data 的屬性名。
  • 如果不匹配以上情況，則直接將 string 類型作為 data 對象的函數名調用 data.***(view)，返回值作為參數值。

所以我們通過 "func" 來綁定數據，這里用的是 attr@*** 的方式綁定，到時候要調用這個屬性的時候就直接通過 data.getAttr(***) 或者縮寫 data.a(***) ；然后通過 "value" 設置一個默認值，作為 func 返回的值為空時的“備用”。

一般我們將代碼比較多的矢量圖放在一個 json 文件中，我取名叫做 service3d.json 放在 scene 文件夾下 ，通過 ht.Default.xhrLoad 方法解析 json 文件的內容，如下：

ht.Default.xhrLoad('scene/service3d.json', function(text) {var json = ht.Default.parse(text);dm.deserialize(json);//反序列化 }) 復制代碼

其中 deserialize 反序列化函數是將數據反序列化到模型，傳入的參數 json 為數據信息對象，用于解析生成對應的 Data 對象并添加到數據容器中。

因為 xhrLoad 方法是異步加載，為了避免后面出現獲取不到數據的問題，我們將剩下的節點屬性控制代碼也寫在 xhrLoad 函數中：

dm.each(function(data) {//遍歷dataModelvar infos = [//我設置的業務屬性名稱{shadowColor: 'shadowColor1', background: 'rectBg1'},{shadowColor: 'shadowColor2', background: 'rectBg2'},{shadowColor: 'shadowColor3', background: 'rectBg3'},{shadowColor: 'shadowColor4', background: 'rectBg4'},{shadowColor: 'shadowColor5', background: 'rectBg5'},];infos.forEach(function(info) {//遍歷infos數組data.a(info.shadowColor, 'rgba(255, 0, 0, 0.35)');//注冊業務屬性 attr 為業務屬性 簡寫為 adata.a(info.background, 'rgb(255, 0, 0)');});setInterval(function() {//設置動畫 動態變化閃爍燈的亮和滅的顯示var random = Math.ceil(Math.random() * 5);//獲取5以內一個隨機整數 （可以配合我設置的業務屬性名稱）var shadowName = 'shadowColor' + random,bgName = 'rectBg' + random;if(data.a(shadowName) === 'rgba(255, 0, 0, 0.35)') {//如果是紅色透明data.a(shadowName, 'rgba(0, 255, 0, 0.35)');//設置為綠色透明}else if(data.a(shadowName) === 'rgba(0, 255, 0, 0.35)') {//如果是綠色透明data.a(shadowName, 'rgba(255, 0, 0, 0.35)');//設置為紅色透明}if(data.a(bgName) === 'rgb(255, 0, 0)') {//如果是紅色data.a(bgName, 'rgb(0, 255, 0)');//設置為綠色}else if(data.a(bgName) === 'rgb(0, 255, 0)') {//如果是綠色data.a(bgName, 'rgb(255, 0, 0)');//設置為紅色}}, 1000);}); 復制代碼

值得注意的一點是，雖然我們在 json 中已經綁定了業務屬性（這里是“shadowColor1,2,3,4,5...”和“rectBg1,2,3,4,5”），但是節點上并沒有這個屬性，所以我們需要注冊一下這些屬性，并給這些屬性設置屬性值。

然后我們就可以通過調用這些屬性來動態更新 Data 上的屬性值圖形界面就會自動刷新，從而達到實時顯示數據的效果。因為 HT 只有一個數據模型，綁定 DataModel 的圖形組件并沒有組件內部的其他數據模型，所以組件都是如實根據 DataModel 來呈現界面效果，因此當用戶拖拽圖元移動時， 本質也是修改了數據模型中 Node 的 position 位置值，而該屬性變化觸發的事件通過模型再次派發到圖形組件，引發圖形組件根據新的模型信息刷新界面。

總結

其實數據綁定沒有什么很深奧的部分，HT 也不需要你考慮太多，一切以最簡單的方式進行著。這個 Demo 需要注意的就是，相同的圖片，如果要顯示不同，那么肯定需要創建不同的節點，若是節點相同，那么變化肯定相同的！

總結

以上是生活随笔為你收集整理的快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。