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