完全开源的App开发框架WeX5之数据绑定02:visible绑定

WeX5移动开发云 发布于 2015/03/26 10:24
阅读 2K+
收藏 0

    上周分享了WeX5数据绑定(Data Bindings)的初步体验(点击查看);现继续跟小伙伴们分享WeX5数据绑定之visible绑定。 

   (提示:WeX5是一个彻底开源的app开发框架,每行源代码都可以自己改;能开发移动app、微信app和web app;只需开发一次,就可以运行于苹果、android等平台上。本文附有WeX5源码地址。使用WeX5的很多大型企业最近都在高薪招聘WeX5开发人员,有意者可联系我们。

    WeX5 数据绑定是基于开源knockoutjs(http://knockoutjs.com)优化改进的前端MVVM库。 为了能够更深入学习和理解,我决定采用全部写html和js源码,而不用可视化拖拽组件的方式,大家可以把这些源码拷贝到WeX5 Studio页面里执行

WeX5数据绑定02:visible绑定

visible绑定(bind-visible)可以绑定可监控对象来动态控制元素是否在页面中显示。bind-visible也可以绑定复杂的表达式来控制元素是否显示。

基本使用

html源码

1
2
3
4
5
6
7
<divbind-visible="shouldShowMessage">
   当"shouldShowMessage"为 true时,才能看到这段消息
</div>
<buttoncomponent="$UI/system/components/justep/button/button"
  class="btn btn-warning"
  bind-click="buttonClick">点我切换
</button>

 

js源码

1
2
3
4
5
6
7
8
varModel =function(){
    this.callParent();
    this.shouldShowMessage = justep.Bind.observable(true);
};
 
Model.prototype.buttonClick =function(event){
   this.shouldShowMessage.set(!this.shouldShowMessage.get());
};

这段代码展示了bind-visible的用法。将上述代码贴到页面运行起来,点击按钮可切换文字的显示和隐藏。

visible绑定规则:通过绑定元素的style.display来控制元素显示。当绑定对象的值为true、不为空的对象、数组的时候,元素的style.display样式会被移除,从而使元素显示;当参数为false、null、undefined、 数字0、空字符串的时候,将会为元素添加样式style.display:none,从而将元素隐藏。

如果绑定的是监视属性,那么当属性改变的时候界面也会发生改变。

visible绑定表达式

还可以为visible绑定表达式,例如:

js源码

1
2
3
4
5
6
7
8
9
10
11
12
13
varModel =function(){
    this.callParent();
    this.myValues = justep.Bind.observableArray([]);
};
 
Model.prototype.buttonClick =function(event){
    if(this.myValues.get().length > 0){
        this.myValues.removeAll();
    }
    else{
        this.myValues.push('some value');
    }
};

上面js代码创建了一个可监控数组对象。buttonClick事件根据可监控数组对象的长度来执行清空数组或向数组增加一项。关于可监控数组对象后面文章会详细介绍。

html源码

1
2
3
4
5
6
7
<divbind-visible="myValues.get().length > 0">
   当"myValues"数组值得长度大于0,才能看到这段消息
</div>
<buttoncomponent="$UI/system/components/justep/button/button"
  class="btn btn-warning"
  bind-click="buttonClick">点我切换
</button>

在上面的代码中,visible绑定的是一个表达式。当myValues的长度发生变化时,visible会被重新计算并设置。

bind-visible=”myValues.get().length > 0″ 这个绑定表示如果myValues的长度大于0,就显示元素div,否则就隐藏。



WeX5开发框架源码已在OSChina托管,如果大家觉得这个好,请帮忙加星加fork,多谢了啊。


http://git.oschina.net/X5OK/WeX5


扫二维码,关注WeX5

(或长按以下二维码,选择“识别图中二维码”

WeX5.com,Apache开源,国内最具规模的App生态圈!



加载中
返回顶部
顶部