官方文档:
WeX5数据绑定05:css绑定 (http://doc.wex5.com/data-bind-css/)
WeX5数据绑定:style绑定 (http://docs.wex5.com/data-bind-style/)
用法1: 动态改变页面的背景图片
定义几个css:
.bgBad {background:url(images/bg_bad.png) repeat 0 0}
.bgNorm {background:url(images/bg_norm.png) repeat 0 0}
.bgGood {background:url(images/bg_good.png) repeat 0 0}
.bgNorm {background:url(images/bg_norm.png) repeat 0 0}
.bgGood {background:url(images/bg_good.png) repeat 0 0}
设置顶级Panel的bind-css: { bgBad: currentBgImg.get() == 0, bgNorm: currentBgImg.get() == 1, bgGood: currentBgImg.get() == 2}
定义currentBgImg变量:
var Model = function(){
this.currentBgImg = justep.Bind.observable(2);
set变量值就可以动态改变背景了
用法2:动态改变list中某一列cell的的背景图片
这个cell是一个x-col
设置bind-style: {'backgroundImage' : 'url(' +val("bgImg") +')'}
bgImg是data对象中的一个字段,可以根据规则来设置值,比如:
var rows = ret.result.rows;
for (var index in rows) {
if (rows[index].val > 100) {
rows[index].bgImg = "images/bg_bad.png";
} else {
rows[index].bgImg = "images/bg_norm.png";
}
}