KO学习重点

总结了一些knockout知识点

绑定模型
ko.applyBindings(viewModel);//全局应用
ko.applyBindings(viewModel, DOM元素);//局部应用

 

赋值
var vModel={

this.firstName=ko.observable();
};
vModel.firstName();
vModel.firstName("newValue");

 

订阅改动事件
vModel.firstName.subscribe();
vModel.firstName.subscribe(function(newValue){alert("Changed: "+newValue);});

删除订阅
var subscription=vModel.firstName.subscribe(function(newValue){});
subscription.dispose();

 

ko.computed用法1（传入this的方式）
var vModel={
         this.firstName=ko.observable();
         this.lastName=ko.observable();
         this.fullName=ko.computed(function(){
                                                                        return this.firstName()+" "+ this.lastName();
                                                                }, this);//需要注意这个this的传入
};

 

ko.computed用法1（不传入this的方式）
function viewModel()

{
         var self=this;//关键点
         self.firstName=ko.observable();
         self.lastName=ko.observable();
         self.fullName=ko.computed(function(){
                                                                        return self.firstName()+ " "+ self.lastName();
                                                               });
}

//对于ko.computed属性的读写分离写法
this.fullName=ko.computed({
                                             read:function(){return xxxxxxxxxxx;},
                                             write:function(value){//分解value，保存到firstName, lastName},
                                             owner: this
                                         }); 

 

判断模型属性的几个函数
ko.isComputed

ko.isObservable

ko.isWritableObservable

 

 

KO模版：foreach
<table>
<tbody data-bind="foreach: people">
     <tr>
          <td data-bind="text: firstName"></td>
          <td data-bind="text: lastName"></td>
     </tr>
</tbody>
</table>
<script>
               var peopleList=ko.observableArray([
                                                                           {firstName:"xxxx1", lastName:"yyyyyy1"},
                                                                           {firstName:"xxxx2", lastName:"yyyyyy2"}
                                                                   ]);
               var vModel= {
                                                                   people=ko.observableArray(peopleList)
                                  };
               ko.applyBindings(vModel);
</script>

 

foreach的as用法，犹如asp.net中的多个repeater,就是定义一个别名

foreach的注释循环写法

foreach的AOP，(加入效果，jQuery)，就是模版方法的before, after等之类的前后事件的处理

 

模版：  if: 变量名，没有容器的写法（注释写法）

<!-- ko if: someExpressionGoesHere -->
<!-- /ko -->
<!-- ko foreach: items -->
<!-- /ko -->

 

with用法，和vb中的一样的目的

 

阻止事件的向上传递: clickBubble:false
data-bind="click: fnName, clickBubble:false"

 

form的submit能检测到回车事件，因此不用click事件
<form data-bind="submit: validateInput">
            xxx
            <input type="submit" value="OK"/>
</form>

 

模型属性的实时跟踪
data-bind="value: v1, valueUpdate:'afterkeydown'"

 

自定义Binding

 

JSON
ko.toJS，将observable的模型拷贝成没有observable的js对象
ko.toJSON，调用ko.toJS，然后利用浏览器本身的JSON.serialize函数把js对象转换为json字符串
如果浏览器不支持本地JSON，则需要引用json2.js，才能让ko.toJSON函数正常

从server得到json数据后的操作：
var parsed = JSON.parse(someJSON);
vModel.firstName(parsed.firstName);

 

 

正在解读ko的源码中，敬请期待。。。哈哈