wex5 教程 之 图文讲解 bind-css和bind-sytle的异同
wex5作为网页开发利器,在前台UI数据交互设计中大量使用了绑定技术,即官方视频教学中也提到了KO,实质是数据绑定与追踪。在前台组件的属性中,为我们提供了两个重要的样式绑定属性,bind-css和bind-style.这两个属性都能动态的为组件或元素绑定样式,那么含义和用法有什么异同呢?
先来看两个例子:
一..bind-css案例:
组件属性设置:
css样式对像:
bind-css含义: 为组件或元素绑定样式对像,注意是样式对像,所以在css样式文件中要创建样式对像;
bind-css格式:1,json形式,用大括号;
2,左侧为样式对像名称,用单引号(绝对不能用双引号);
3,右侧为执行样式对像条件,返回值为true或false,为true条件成立,执行该样式
4,右侧绑定方法可以是数据组件,也可以是可观察对像,也可以是变量
bind-css缺陷:根据判断条件,为元素动态绑定并执行样式对像。把思维扩展一下,我如果想根据某个值,为元素动态的执行某个样式属性如何实现呢?比如,我得到一个5,把5给了样式中的font-size,动态来改变样式中的字体大小怎么实现呢?或者根据拾色器动态得到一个color值,如何动态改变样式中的color值呢?很多朋友会说,你用css表达式获取js对像值,来动态执行就可以了。是的,这种方法可行,效果如下:
这种方法经测试,确实可行,带来了更复杂的问题:
一.是浏览器的兼容问题,可能在某些浏览器上执行不了;
二 是性能能问题,在css对像中执行了expression表达式,一个属性还好,如果有100个多样式动态执行呢?有人会说不可能有那么多属性,举个反例,我在字幕设计界面,文字所有属性都要动态改变并监控样式,颜色,字本,大小,宽高,缩进,行高,背景,等等,估计还没开发,就死到页面了。
显然,bind-css不能实现我的效果,那么,wex5为我们提供了另外一个属性,bind-sytle,弥补了动态样式绑定的不足。
二.bind-style案例:
先看效果:
我的意图,通过下拉字体大小选择框,选出字号大小,让span里的文字动态并实时改变相应的font-size .样式绑定方法如下:
图中color和size,为变量,其实是引入了可观察变量,引入方法如下:
bind-style含义:根据值,动态为元素执行样式属性;
bind-style格式:1.json形式,用大括号,跟bind-css写法一样。
2.属性可以多个连用,中间用逗号分格。
3. 左侧为属性键,必须用单引号标注(绝对不能用双引号,跟bind-css语法一样)。
4.右侧为属性值,可以是data中取出的值,也可以是固定值。如何想用变量,那么变量要引入可观察对像。
5.可观察对像的意义,其实就是将一个变量赋于了绑定属性,供其它组件或元素进行绑定,类似于data绑定。绑定之后,可观察对像中的值可以通过绑定跟踪的方式,将变量中的值动态传输给绑定对像。上例中,color和size中的值动态传输给了span的color和size值。
6.可观察对像取值方法:XXX.get();
通过以上两个例子分析,可以得出:
1.bind-css,是绑定样式对像,而bind-style才是绑定样式。
2.bind-css需要预先有css对像,而fbind-style可以动态执行,执行方法更灵活,更利于UI设计。
wex5 教程 之 图文讲解 bind-css和bind-sytle的异同的更多相关文章
- wex5 教程 之 图文讲解 考题模块框架设计
前几天帮人设计了一个手机版(做了屏幕适配,电脑使用也正常)的考题框架,供学习交流使用,今天把设计思路与技巧命整理一下. 一 效果演示: 1 登陆后台 题库管理 试卷管理 考生管理 科目管理 2 考生注 ...
- wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术
一 前言: wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象.在以后我的项目开发中,将大量运用可观察对象. 那么,问题来了: 1. 可观察对 ...
- wex5 教程 之 图文讲解 全局可观察变量与登陆状态全局控制
一 先说说,这两个概念是什么意思 全局可观察变量?没听说过,只听过全局变量,那你out了,因为我要充分发挥绑定技术来控制页面部局,组件的隐藏与显示,文字内容,样式改变.看我博文大家知道,我想用绑定技术 ...
- wex5 教程 之 图文讲解 后台管理界面设计与技巧
视频教程地址:http://v.youku.com/v_show/id_XMTgwOTAyMTkyMA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0 ...
- wex5 教程之 图文讲解 文件上传attachmentSimple(1)
视频教程地址:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html 效果预览: 1 调用attchmentSimple组件,打开文件管理器,并选中,显 ...
- wex5 教程之 图文讲解 Cloudx5一键部署
视频教程地址:http://v.youku.com/v_show/id_XMTc3OTExNTUwNA==.html 效果预览: 一键部署cloudx5三要领 1.数据源命名为x5 2.数据库命名为x ...
- wex5 教程 之 图文讲解 登陆,注册,页面跳转
视频教程地址:http://v.youku.com/v_show/id_XMTc3OTE0Nzg0NA==.html 效果预览: 登陆页面 首页用windowContainer装载 注册页面 登陆 ...
- IDEA 新建 Java 项目 (图文讲解, 良心教程)
IDEA 新建 Java 项目 (图文讲解, 良心教程) 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载 ...
- 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)
原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在w ...
随机推荐
- 1022. Digital Library (30)
A Digital Library contains millions of books, stored according to their titles, authors, key words o ...
- HDU2845 DP
Beans Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- thinkphp 关于iframe一次提交完成所有操作
一.上传操作html界面,upload.html <import type='css' file="admin.css.common" /> <import ty ...
- DateFormatUtil.java
package com.vcredit.framework.utils; import java.sql.Timestamp;import java.text.DateFormat;import ja ...
- 一款名為com.apple.pcapd的服務
一款名為com.apple.pcapd的服務,通過libpcap網路數據包捕獲函數包捕獲流入和流出iOS設備的HTTP數據.據紮德爾斯基稱,這一服務在所有iOS設備上都是默認啟動的,能被用來在用戶不知 ...
- jquery ajax 对异步队列defer与XMLHttprequest.onload的依赖
ajax 对异步队列defer与XMLHttprequest.onload的依赖
- ModSecurity 白名单设置
方法一.SecRuleRemoveById 指令:通过Rule ID禁用指定规则 #waf whitelist <LocationMatch .*> SecRuleRemoveById 9 ...
- 【转】NGUI研究院之自适应屏幕(十)
http://www.xuanyusong.com/archives/2536 现在用unity做项目 90%都是用NGUI,并且我个人觉得NGUI应该算是比较成熟的UI插件,虽然他也存在很多问题,但 ...
- 【转】Unity中的协同程序-使用Promise进行封装(二)
原文:http://gad.qq.com/program/translateview/7170970 译者:王磊(未来的未来) 审校:崔国军(飞扬971) 在上一篇文章中,我们的注意力主要是 ...
- Day3~Day7(2016/1/23~2016/1/27)
活动的生命周期:onCreate();onStart();onResume();onPause();onStop();onDestroy();onRestart(); 活动的启动模式:standard ...