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到页面
 
 
 
posted @ 2019-01-27 20:57  jason_xiao  阅读(244)  评论(0编辑  收藏  举报