wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术
一 前言:
wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象。在以后我的项目开发中,将大量运用可观察对象。
那么,问题来了:
1. 可观察对象是什么?
2. 可观察对象能干什么?
3.可观察对象能代替哪些工作?具有哪些优势?
4 可观察对象的绑定机制与实际运用技巧如何实现?
为了大家了解绑定技术在web开发中的重要性,看明白我此后更深层次的运用,今天,我先以我用wex5设计的的视频字幕机来说明,没有可观察对像,字幕机的制作,几乎无从谈起,用了可观察对象的绑定机制,居然代码都不用写。
废话少说,看实例。
二 设计需求:
设计需求如下:
1 后台字幕设计器界面,通过右侧操作,左侧视频屏幕上的文字实时响应操作
2 响应内容包括:内容,字体,颜色,背影,透明度,字间距,行间距,字号等。
3 设计好后,将文字相关属性保存到数据库,客户端进行视频播放时,实时接收后台设计的广告字幕内容
三 实现思路:
先抛开今天的技巧,我们先思考,如何实现上述设计需求呢?
1 js方法
想都不去想,这么多参数,让js去取值再赋值,还得找到元素,还得控制触发事件,增减监听事件来监听对像。我的天哪,几个参数还可以,这么多参数??还得控制css样式,高手也许能实现,估计一个月能写完,也能测试成功,估计出错了也别想改回来,代码量太大了
2 baasdata绑定
这种方法很好。可惜,这里用到了非wex5组件,color,其它还有很多,比如video,audio,总之,html5还有一半的元素没有集成在wex5的组件库中,你就是绑定到baasdata,也不能满足复杂的页面需求啊。
那怎么办呢?
难道我这个web版的字幕设计器不能完成了吗?
答案当然是肯定的,就是开篇提到的可观察对象集群应用与绑定技术。
四 组件创健与代码实现
1 非wex5组件与属性的创建
在源码合适位置手动添加: <input type="color" id="textID" bind-value="textColor"/>,创建输入类型,color
点击“添加自定义属性”,创建bind-value属性。神奇,就这样加一个bind-value属性,color的值,就可以绑定到其它对象上。今天,把color的颜色值绑定到可观察对象上。
这里只用到了color,其它非wex5元素或组件创建方法相同。
2 文字属性数据库字段
3 前端baasdata
4 创建所有属性相对应的可观察对象
5.将页面组件的值绑定到可观察对象
同理,将所有组件的bind-value的属性值里写上相对应的可观察对象名称,组件的值,无论如何发生变化,可观察对象的值都会与之绑定。举例就是,color拾色器,我点击后选择了黑色,那么color的值将同步到textColor的值里去。
运用此种方法,所有组件的值,都绑定到了可观察对象中,接下来,就是取出可观察对象的值,再绑定到text中的样式中去。
6 将可观察对象的值取出,用text的bind-style方法绑定到text的样式中
就一句话
至此,操作字幕机右侧,视频上的字幕就实现了同步。
这么简单??就这么简单???
是的,就这么简单。
那我为什么讲了这么多废话?就是为了让大家明白,可观察对象与绑定技术在web开发中的重要性与优势。
正是因为这个字幕机的设计实现不了,太复杂,才回归到原点重新思考。
大家学技术,更要学会思考问题的方法。
给大家提示一下:
之前用js做过元素托拽,如果用坐标绑定来实现呢????真是简而又简。
五 总结:
1 绑定技术是实现优秀web设计的核心思想
2 思路越简单,代码越复杂;思路越高深,代码越简单。本例中居然一行代码没写,只是创建了可观察对像。
3 不能局限于wex5,放开思维,想想wex5没有的东西,如何导进来,巧妙的运用wex5的框架基础与绑定技术。
wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术的更多相关文章
- wex5 教程 之 图文讲解 全局可观察变量与登陆状态全局控制
一 先说说,这两个概念是什么意思 全局可观察变量?没听说过,只听过全局变量,那你out了,因为我要充分发挥绑定技术来控制页面部局,组件的隐藏与显示,文字内容,样式改变.看我博文大家知道,我想用绑定技术 ...
- wex5 教程 之 图文讲解 考题模块框架设计
前几天帮人设计了一个手机版(做了屏幕适配,电脑使用也正常)的考题框架,供学习交流使用,今天把设计思路与技巧命整理一下. 一 效果演示: 1 登陆后台 题库管理 试卷管理 考生管理 科目管理 2 考生注 ...
- wex5 教程 之 图文讲解 bind-css和bind-sytle的异同
wex5作为网页开发利器,在前台UI数据交互设计中大量使用了绑定技术,即官方视频教学中也提到了KO,实质是数据绑定与追踪.在前台组件的属性中,为我们提供了两个重要的样式绑定属性,bind-css和bi ...
- 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装载 注册页面 登陆 ...
- 图文解说:Nginx+tomcat配置集群负载均衡
图文解说:Nginx+tomcat配置集群负载均衡 博客分类: appserver nginxTomcatUbuntuLinux网络应用 作者:niumd Blog:http://ari.iteye ...
- 超详细,多图文使用galera cluster搭建mysql集群并介绍wsrep相关参数
超详细,多图文使用galera cluster搭建mysql集群并介绍wsrep相关参数 介绍galera cluster原理的文章已经有一大堆了,百度几篇看一看就能有相关了解,这里就不赘述了.本文主 ...
随机推荐
- 【hihoCoder】1041. 国庆出游
问题:详见http://hihocoder.com/problemset/problem/1041 有n个城市,城市编号为1-n,城市间有n-1条路(所以,城市路网是一棵树).给定一个序列S,要求判断 ...
- u盘安装windows系统
使用老毛桃为例: 电脑下载老毛桃到自己电脑,插入U盘,制作U盘为启动盘. 四种安装方法: 1.win7能够使用:(win中包含iso的解压文件)解压ISO ----〉 restart win7 --- ...
- c#选择填空题题库
http://wenku.baidu.com/link?url=0g2mfcX_atcRIhJRqJnXzT1s2AIY-a2nR7pUguJn8cdSoy6V0CATevid3eQ7l-kgIDB6 ...
- 演示一个OLS进行数据访问控制的示例
1.确认数据库版本 2.安装OLS组件 3.创建策略 4.创建分级和标签 5.创建测试用户并授权 6.更新标签 7.测试演示
- Canvas 唯美雨落代码实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 解决安装sql server 需要重启问题
解决办法: 一.在SQL服务器的安装盘中找到MSDE这个目录,并且点击setup.exe安装它. 二.安装完毕后,重启系统WINDOWSXP,这下就可以看到SQL服务的图标出现了. 三.再直接安装根目 ...
- BizTalk开发系列(十八) 使用信封拆分数据库消息
之前写了一篇的<BizTalk开发系列(十七) 信封架构(Envelop)> 是关于信封架构及其拆装原理的,都是理论性的内容.信封在BizTalk开发过程中最常用的应该是在读取SQL Se ...
- 【iCore3 双核心板】例程三十四:U_DISK_IAP_ARM实验——更新升级STM32
实验指导书及代码包下载: http://pan.baidu.com/s/1pKabR7P iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- Python3.5连接Mysql
由于mysqldb目前仅支持到python3.4,所以这里选择pymysql. pymysql下载地址: https://pypi.python.org/packages/source/P/PyMyS ...
- 解决Windows下运行php Composer出现SSL报错的问题
解决Windows下运行php Composer出现SSL报错的问题 2015-01-14 20:05 在windows下运行composer却出现SSL报错: E:\www>php -f ...