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的源碼中，敬請期待。。。哈哈