Html5 经验
knockout的模式
|
MVVM
|
四大重要概念
|
声明式绑定UI界面自动刷新依赖跟踪模版
|
一些特点
|
纯javascript类库
可添加到web程序最上部
简洁 才25kb
兼容任何主流浏览器
采用行为驱动开发
|
快捷键的设置方法
|
settings->keymap
|
jQuery 和 knockout的 长处
|
1. jQuery 擅长 元素操作 和 事件
2. knockout 擅长 数据模型与用户UI界面进行关联
|
data-bind
|
文本 text
按钮是否可点击 enable ; 但实际操作中发现得用这个 touch-events: none; pointer-events: none;
|
激活knockout
|
ko.applyBindings( viewModel , view ) ;这个view可以省略,
当你在一个页面中声明了多个View Model来绑定不同的界面区域时,这样限制是很有好处的
|
监控机制
|
var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
} ;
|
计算属性
|
fullName:ko.computed( function(){
return this.personName + " " + this.personLastName ) ,}
this ) ;
|
监控属性数组(observableArray)。
|
myObservableArray.sort( function(left, right) {
return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1)
})
var myObservableArray = ko.observableArray();
2 myObservableArray.push('Some value');
有这些方法可用:pop unshift shift reverse splice remove removeAll
observableArray :跟踪的是数组中的对象,而不是对象的状况。即observableArray 仅跟踪它拥有的对象,并且在对象被添加或者删除的时辰,通知listeners 。要监控对象的属性变更,须要编写自力的代码
|
visible
|
<div data-bind="visible: shouldShowMessage">
<div data-bind="if: displayMessage">
|
text html 的绑定
|
html
|
其它属性绑定 用 attr
|
比如 <a data-bind="attr: { href: url, title: details }">
|
在没有绑定属性的情况下使用foreach
|
<!-- ko foreach: myItems --> <li>Item <span data-bind="text: $data"></span></li> <!-- /ko -->
|
with
|
要学会用 其实就是声明母对象
|
as
|
声明子对象的名字 举例:
<ul data-bind="foreach: { data: categories, as: 'category' }">
<li>
<ul data-bind="foreach: { data: items, as: 'item' }">
<li>
<span data-bind="text: category.name"></span>:
<span data-bind="text: item"></span>
</li>
</ul>
</li>
</ul>
|
class其实是分开控制的
|
<div class="tab-1 active" data-bind="click:navigateTo('bean'), css: {'active':$root.beanIsSelected"}></div>
|
如果渲染绑定view的子级要不要加$root
|
其实不用
|
如果在html里给绑定的方法加参数了,有一种写法默认会执行一次,有一种写法不会
|
click:navigateTo('star') 这种会默认执行一次
click: function() { navigateTo('star') } 这种不会默认就执行一次
|
判断class是否存在支持 !吗
|
不支持css: {'active': !beanIsSelected}" 前面的这种写法是无效的
要用这种写法:css: {'active': !beanIsSelected() }
|
如何绑定图片地址
|
<img data-bind="attr:{'src':oneitem.imgUrl}" />
|
动态绑定高度的方法
|
data-bind="style:{'height':$root.tabInnerHeight }"
tabInnerHeight: ko.computed( function(){
return (window.innerHeight * 0.6) + "px" ;}, this ),
|
绑定方法的写法:
|
navigateTo: this.navigateTo.bind( this ),
|
$root
|
基本上用不上 $root
|
event binding
|
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
|
其它绑定
|
form 的 submitinput 的 value
|
input 的 value 和 enable
|
<input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" />
|
hasfocus
|
<input data-bind="hasfocus: isSelected" />
|
checked
|
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam"/></p>
|
options
|
<p>Destination country: <select data-bind="options: availableCountries"></select></p>
|
selectedOptions
|
<select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select>
|
上下文绑定
|
#parent $parents $root $data $index $parentContext $context $element
|
template绑定通过模板将数据render到页面
|
|
|
|
Html5 经验的更多相关文章
- 来自IOS开发工程师的零基础自学HTML5经验分享
移动互联网的火爆,而Html具有跨平台.开发快的优势,越来越受到开发者的青睐.感谢IOS开发工程师“小木___Boy”’带来的HTML5学习经验分享. 一.学习途径 1.很多视频网站 比如慕课.和极客 ...
- html5 经验记录 持续更新
1 关于page cache 由于移动端浏览器webkit基本都实现了page cache(火狐叫做back-forwoad cache);所以回退操作基本不会触发onload操作了,不过上一页的状态 ...
- 迅雷首席架构师刘智聪:微信小程序的架构与系统设计的几点观感
笔者注:本文来自于迅雷首席工程师刘智聪的个人分享,他毕业于南昌大学化学系,加入迅雷后设计开发了多款迅雷核心产品,凭借“大规模网络流媒体服务关键支撑技术”项目获得2015年国家科学技术进步奖二等奖,同时 ...
- (转)HTML5游戏如何挣钱?2条经验让你每款赚3万刀
原文作者:Alexander Krug,是世界上最大的HTML5游戏平台的运营商SOFTGAMES的CEO. 现今苹果App Store当中的应用数量可以以海量来形容,最新发布的应用对排行榜的冲击力也 ...
- 制作html5微信页面的经验总结。
先罗列一下我遇到的问题: 用户可选择图片上传,但是图片比较大(基本都是2M以上),而且还得异步上传. 由于操作上比较多的设计都是隐性的例如滑动之类,需要手势动画作提示. 块内元素滚动时不流畅,或不能滚 ...
- 使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享
什么是5+Runtime? 首先简单介绍一下5+Runtime: HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与 ...
- Html5 布局经验分享-第1集
移动端的布局与pc端的布局相比 移动端的布局就简单的多,兼容性不必考虑那么多,css3各种特性基本上是可以放肆的写:(个人看法) 本人做移动web 布局一段时间了,把这其中遇到的一些问题总结下来,均是 ...
- HTML5 placeholder实际应用经验分享及拓展
QQ邮箱登陆(http://mail.qq.com) 如下截图啦: 我在上面一个demo类似原理上做了下修改,制作了一个这样子交互效果的demo,希望对有兴趣的同行能帮上点忙,您可以狠狠地点击这里:透 ...
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
随机推荐
- SWD学习笔记
SWD其实和JTAG类似,是一种调试串口. JTAG大致了解了一下.JTAG(Joint Test Action Group)主要4 lines:TMS(模式选择),TCK(时钟),TDI(数据输入) ...
- Java连载80-数字类格式、随机数、BigDecimal
一.数字类 1.关于数字格式化:java.text.DecimalFormat; 2.数字格式元素: # 任意数字 , 千分位 . 小数点 0 不够补零 package com.bjpowernode ...
- Ubuntu操作基本快捷键
* 打开主菜单 = Alt + F1* 运行 = Alt + F2* 显示桌面 = Ctrl + Alt + d* 最小化当前窗口 = Alt + F9* 最大化当前窗口 = Alt + F10* 关 ...
- [转]网络协议-redis协议
Redis 通信协议(protocol) 本文档翻译自: http://redis.io/topics/protocol . Redis 协议在以下三个目标之间进行折中: 易于实现 可以高效地被计算机 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:用于要弹出信息的按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 微信小程序中,如何实现显示,隐藏密码的功能
最近在搞小程序的开发,遇到隐藏,显示密码的功能的时候,电脑上调试没问题,但是手机上面点击却没有效果,必须要跳转到其他页面再跳回来,才能正常显示. 一时间搞得我很头疼,查找资料后,终于知道了是什么原因. ...
- PaperReading20200224
CanChen ggchen@mail.ustc.edu.cn BANANAS Motivation: This paper proposes a network performance pred ...
- java并发:初探用户线程和守护线程
用户线程和守护线程 用户线程 用户线程执行完,jvm退出.守护线程还是可以跑的 /** * A <i>thread</i> is a thread of execution i ...
- Django 连接 Mysql (8.0.16) 失败
首先,确认数据库配置正确无误: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # or use: mysql.con ...
- 《N诺机试指南》(一)数组妙用
题目A: 大家思路有可能是这样: 将输入数据全部存储到一个数组里,然后可以冒泡排序一波,从小到大排序 那么怎么找到重复次数呢:我是这样想的,新定义数组b,原数组a,首先b[0] = a[0],定义指针 ...