knockoutjs 经验总结

http://knockoutjs.com/documentation/introduction.html

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到页面

转载于:https://www.cnblogs.com/jason-beijing/p/10327925.html

knockoutjs 经验总结相关推荐

Knockoutjs官网翻译系列（一）
最近马上要开始一个新项目的研发,作为第一次mvvm应用的尝试,我决定使用knockoutjs框架.作为学习的开始就从官网的Document翻译开始吧,这样会增加印象并加入自己的思考,说是翻译也并不是纯 ...
基于Metronic的Bootstrap开发框架经验总结（7）--数据的导入、导出及附件的查看处理...
在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.我在较早时期的EasyUI的Web框架上, ...
32 vs 开发wince_十年经验的大神谈如何学STM32嵌入式开发
理解嵌入式从硬件上说 "嵌入"将基于CPU的处围器件,整合到CPU芯片内部,比如早期基于X86体系结构下的计算机,CPU只是有运算器和累加器的功能,一切芯片要造外部桥路来扩展实现 ...
华师大数据科学考研_2020年华东师范大学行政管理专业考研报录比、参考书目、考研经验分享...
一.考研选择该校的原因以及考虑到的因素 1.学校定位,对比本科学校.每个人考研都有一个非常重要的原因,就是去比本科更好的学校,提高出身问题.所以大家都想考985.211.我也不例外,因为我本科是211 ...
为什么你的工作经验不值钱
前言每年的三月到六月,都是招聘高峰,除了大量的应届毕业生涌入社会之外,还有一些工作了一两年尚未找到稳定归属感的人,也会开始投递简历,是的,基本都是在拿了年终奖之后.作为前端技术主管,有幸,或者说是不 ...
Linux进程与线程的区别详细总结（面试经验总结）
首先,简要了解一下进程和线程.对于操作系统而言,进程是核心之核心,整个现代操作系统的根本,就是以进程为单位在执行任务.系统的管理架构也是基于进程层面的.在按下电源键之后,计算机就开始了复杂的启动过程, ...
2021暨南大学计算机考研,暨南大学2021广播电视专硕经验贴
[基本信息] 本人来自江西某二本大学,本科专业是广播电视编导,,初试总分396分.其中政治81,英语62,专业课一126,专业课二127.初试排名第三.专业课第一,录取总成绩排名第二. [关于英语62 ...
java mongodb存base64_阿里JAVA面试分享经验【文末有福利】
基础篇参考这里的面试题:面试题写在后面了能回答上百分之七十,基础的广度就算OK了.如果达不到,那么缺什么就赶紧补什么.广度达到了,还需要对个别热点问题有深度.每个人的精力都有限,可以适当挑选两个热 ...
Java程序员三年的工作经验，却不如一个新人的工资高？？？
文章目录一.关于程序员的几个阶段第一阶段:三年第二阶段:五年第三阶段:十年二.关于项目经验三.关于专业技能 1.基本语法 2.集合 3.设计模式 4.多线程 5.JDK源码 6.框架 7. ...
从 Flutter 的视频渲染到 App 落地经验
3月23日周六,由 RTC 开发者社区主办的 "RTC Dev Meetup 北京站"如约举行,超过100位求知若渴的开发者参加了活动.来自 LeanCloud.声网 Agora. ...

knockoutjs 经验总结

knockoutjs 经验总结相关推荐

最新文章

热门文章