knockoutjs 经验总结
Posted jason-beijing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了knockoutjs 经验总结相关的知识，希望对你有一定的参考价值。
|
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到页面
|
|
|
|
|