前言发现大家很好奇直接从json文件中操作节点属性实现界面的动态变化，所以这篇文章是关于数据绑定以及如何使用的这些绑定数据做一个解释，我在机房工控服务器上写了一个基于服务器灯闪烁现象的简单例子。我们从2d和3d两个角度来分析数据绑定的问题。效果图2d代码实现其实不管是2d还是3d，在HT中，databinding是不分维度的，所以两者在实现上非常相似。代码下载地址：https://download.csdn.net/dow...绘制设备2d和3d中的设备是根据下面一个机柜内部设备的“矢量”绘制的，这个矢量的“闪烁”的“Light”部分增加了数据绑定，专门绑定了“BlinkingLight”的背景颜色和阴影颜色。改变阴影颜色是为了让“光”有“发光”的效果。下图红框为“Blinkinglights”。首先我们要知道怎么画矢量图（http://hightopo.com/guide/gui...）？我们demo的整体矢量图绘制比较复杂，这里只说一下上图中的“光”矩形和文字是怎么绘制的。我们知道绘制一个矢量图json必须包含以下三个参数：width，矢量图的高度，矢量图的高度，comps，矢量图的componentArray，每个array对象都是一个独立的组件类型（http:///hightopo.com/guide/gui...），数组的顺序就是组件绘制的顺序。每个元素都必须有宽度和高度。不解释这两个属性。comps属性非常强大。在上面第三点讲到，这是一个数组。绘制图文的实际操作如下：{"width":48,//矢量整体宽度"height":262,//矢量整体高度"comps":[{"type":"text",//文本"text":"port3",//文本内容"align":"center",//文本对齐方式"color":"rgb(255,255,255)",//字体颜色"font"":"8pxarial,sans-serif",//文字字体大小"rect":[//向量中组件绘制的矩形边界18.28654,//X轴坐标39.80679,//Y轴坐标27.82265,//宽度11.5434//高度]},{"type":"rect",//矩形"background":"rgb(255,0,0)",//属性默认值"shadow":true,//settotrueShowshadow"shadowOffsetX":0,//选中图元阴影的水平偏移量"shadowOffsetY":0,//选中图元阴影垂直偏移量"rect":[//向量中的分量绘制的矩形边界4.38544,//x轴坐标32.55505,//y轴坐标14.46481,//宽6.1554//高]}]}这段代码绘制了一个矩形和一个文本绘制完矢量后，我们可以通过为节点设置图像来显示矢量。当然，上面绘制的向量并不是所有绘制向量的代码。具体可以参考：https://download.csdn.net/dow...要动态改变一个节点的属性，首先要获取这个节点。我们可以遍历数据模型DataModel，或者通过tag标签获取节点，或者通过鼠标点击事件等等。本Demo中需要操作的节点较多，因此我选择使用遍历数据模型的方式获取节点。那么问题来了，如何通过图片或者矢量图来定位这个节点呢？如果一个节点都没有创建，则无法获取图片对应的节点（或者直接将这张矢量图作为节点的图片，可能会出现六个设备的变化一模一样！毕竟是同一个节点！）。所以我们要从图中删除这些特殊的部分，然后在相应的位置填上节点，然后为节点设置设备的矢量图。先删除对应位置的矢量图，如下图红框部分所示：我们在红框部分分别创建八个设备节点，并为这八个节点设置相同的矢量图。嗯？你可能想知道为什么同一张图片显示不同（光线变化的顺序不同），让我们来看看这是怎么做到的。那么这八个具有相同矢量图的设备是如何通过代码控制闪烁灯随机变化的呢？关键在于我们上面画的矢量图，之前有意跳过：数据绑定。数据绑定由于灯光的闪烁是通过设置矩形的背景色来实现的（当然我这里也加了阴影，目的是为了有“亮起来”的效果），所以我们对背景进行数据绑定这个矩形的color属性，然后通过data.a方法获取和设置属性值。{"type":"rect",//rectangle"background":{//rectanglebackground"func":"attr@rectBg2",//数据绑定字符串类型以attr@***开头，然后返回数据.getAttr(***)value，其中***表示attr的属性名"value":"rgb(255,0,0)"//属性默认值},"shadow":true,//设置为true显示shadow"shadowColor":{//阴影颜色"func":"attr@shadowColor2",//数据绑定字符串类型"value":"rgba(255,0,0,0.35)"//属性默认值},"shadowOffsetX":0,//选中图元阴影的水平偏移量"shadowOffsetY":0,//选中图元阴影垂直偏移量"rect":[//组件绘制的矩形边界vector4.38544,//x轴坐标32.55505,//y轴坐标14.46481,//width6.1554//height]}上面是我重绘部分矩形光向量后的代码，有什么区别？对了，background属性和shadowColor属性都出现了两个值，这两个值看起来“怪怪的”？数据绑定（http://hightopo.com/guide/gui...）并没有那么难，绑定格式很简单，只要将之前的参数值替换成一个具有func属性的对象，如果对应的值获取的时候如果func未定义或为null，则将使用value属性定义的默认值。func的内容有以下几种：函数类型，直接调用函数，传入相关的Data和view对象，参数值由函数的返回值决定，即func(data,view)称呼。string类型：以style@开头，返回data.getStyle()的值，其中*代表style的属性名。attr@，返回data.getAttr()的值，其中*代表attr的属性名。字段@，返回数据。值，其中*代表数据的属性名称。如果以上条件不匹配，直接调用data.*(view)，以string类型作为数据对象的函数名，返回值作为参数值。所以我们使用“func”来绑定数据，这里我们使用attr@来绑定，当我们要调用这个属性的时候，直接传data.getAttr()或者简写data.a(*)即可；然后传递“值”将默认值设置为func返回空值时的“后备”。一般我们把代码比较多的矢量图放在一个json文件里，我命名为service3d.json放在scene文件夹下，通过ht.Default.xhrLoad方法解析json文件的内容，如下：ht.Default.xhrLoad('scene/service3d.json',function(text){varjson=ht.Default.parse(text);dm.deserialize(json);//反序列化})其中deserialize反序列化函数就是反序列化数据序列化到模型中，传入参数json是一个数据信息对象，用于解析生成对应的Data对象，添加到数据容器中。因为xhrLoad方法是异步加载的，为了避免后面获取不到数据的问题，我们在xhrLoad函数中也写了剩下的节点属性控制代码：dm.each(function(data){//遍历dataModelvarinfos=[//我的业务属性名称{shadowColor:'shadowColor1',background:'rectBg1'},{shadowColor:'shadowColor2',background:'rectBg2'},{shadowColor:'shadowColor3',background:'rectBg3'},{shadowColor:'shadowColor4',background:'rectBg4'},{shadowColor:'shadowColor5',background:'rectBg5'},];infos.forEach(function(info){//遍历信息数组data.a(info.shadowColor,'rgba(255,0,0,0.35)');//注册的业务属性attr简写为一个data.a(info.background,'rgb(255,0,0)');});setInterval(function(){//设置动画动态改变闪烁灯的亮灭显示varrandom=Math.ceil(Math.random()*5);//获取一个5以内的随机整数（可以用与我一起设置业务属性名称）varshadowName='shadowColor'+random,bgName='rectBg'+random;if(data.a(shadowName)==='rgba(255,0,0,0.35)'){//如果是红色透明data.a(shadowName,'rgba(0,255,0,0.35)');//设置为绿色透明}elseif(data.a(shadowName)==='rgba(0,255,0,0.35)'){//如果是绿色透明数据.a(shadowName,'rgba(255,0,0,0.35)');//设置为红色透明}if(data.a(bgName)==='rgb(255,0,0)'){//如果是红色data.a(bgName,'rgb(0,255,0)');//设置为绿色}elseif(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的位置值属性，将这个属性变化触发的事件通过模型再次派发给图形组件，使图形组件根据刷新界面新模型信息。总结其实数据绑定并没有什么很深奥的东西，HT也不需要你想太多，一切都以最简单的方式进行。在这个demo中需要注意的是，如果要对同一张图片进行不同的显示，必须创建不同的节点。如果节点相同，则更改必须相同！
