KnockoutJS是一個常用的JS框架，目的爲減少開發者在使用JS或JQuery時大量的DOM操作所導致的操作代碼複雜且難以理解，並且有助於數據與HTML的分離，在團隊中大家統一認同此框架的前提下，能夠提高開發效率。
本人也是最近開始使用這套框架，並且記錄下一般性的使用心得，以備日後查閱。如果能夠幫助大家解決一些自己的問題，實屬超出預計。：）
所有關於下載，API查閱，示例均在此http://knockoutjs.com/
首先引入Knockout文件knockout-3.0.0.js和knockout.mapping.min.js兩個必要文件，Knockout可以獨立於JQuery類庫運行，So Jquery類庫不是必要條件。
Knockout最強大和最常用的工具在於雙向綁定（TwoWay-binding），適用於任何需要綁定數據的場景。使用也很簡單方便。這裏分爲多個示例講解一些常見的binding
HTML（爲保證重複利用，這是所有代碼共用之HTML）：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/knockout/knockout-3.0.0.js" type="text/javascript"></script>
<script src="js/knockout/knockout.mapping.min.js" type="text/javascript"></script>
<script src="js/knockout/koExternalTemplateEngine_all.min.js" type="text/javascript"></script>
<script src="js/JScript1.js" type="text/javascript"></script>
<style>
#testDiv .Selected
{
background-color:Red;
width:50px;
}
.NotSelected
{
background-color:Yellow;
width:50px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id ="testDiv">
<input type="text" data-bind="value:FirstName"></input><br/>
<input type="text" data-bind="value:LastName"></input><br/>
<span data-bind="text:FullName"></span>
<span data-bind="css:{Selected:FirstName()=='Arwind2014', NotSelected:FirstName()!='Arwind2014'}" class="NotSelected">ooo</span>
<a data-bind="attr:{href:Url()}">Tecent</a>
<div>
<ul data-bind="foreach:SubViewMode;">
<li data-bind="text:Name">1</li>
</ul>
</div>
<div data-bind="with:SubViewMode2;">
<ul data-bind="foreach:Items">
<li data-bind="text:Name">1</li>
</ul>
</div>
<input type="button" value="TestButton" data-bind="click:ClickTest" />
<input type="button" value="TestButton2" data-bind="event:{click:ClickTest}" />
<input type="button" value="TestButton3" data-bind="event:{click:function(data, event){ClickJoinName('arwind','gao')}}" />
<input type="button" value="TestCount" data-bind ="click:ClickCount" />
<span data-bind="text:CountValue"></span>
</div>
</form>
</body>注意js改爲自己的路徑。
示例一：
簡單observable綁定
var TestModel = {};
TestModel.FirstName = ko.observable("Arwind");
TestModel.LastName = ko.observable("Gao");
TestModel.FullName = ko.computed(function () {
return TestModel.FirstName() + " " + TestModel.LastName();
});
簡單的一個Model類 對應之HTML
<input type="text" data-bind="value:FirstName"></input><br/>
<input type="text" data-bind="value:LastName"></input><br/>
<span data-bind="text:FullName"></span>
JS最後需要添加綁定代碼（這段代碼只需添加在最後，僅需添加一次，之後示例不再贅述）
ko.applyBindings(TestModel, document.getElementById("testDiv"));
上面的代碼只能執行一次 若需要相應數據的變化 如ajax請求導致多次綁定，需要多加判斷，例如此Model直接從Json數據mapping過來，則只需再次mapping改變model的值即可改變HTML端：
if (TestModel == undefined) {
TestModel = ko.mapping.fromJS(girds);
ko.applyBindings(TestModel, document.getElementById("testDiv"));
}
else {
ko.mapping.fromJS(girds, {}, TestModel);
}
示例二：
css的綁定
<style>
#testDiv .Selected
{
background-color:Red;
width:50px;
}
.NotSelected
{
background-color:Yellow;
width:50px;
}
</style>
HTML
<span data-bind="css:{Selected:FirstName()=='Arwind2014', NotSelected:FirstName()!='Arwind2014'}" class="NotSelected">ooo</span>
示例三
URL的綁定
HTML
<a data-bind="attr:{href:Url()}">Tecent</a>
Knockout
TestModel.Url = function () {
return "www.baidu.com";
};
示例四
子Model嵌套綁定
Knockout
//with用於子model綁定
TestModel.SubViewMode = [{ Name: "Name1" }, { Name: "Name2"}];
TestModel.SubViewMode2 = { Items: [{ Name: "Name1" }, { Name: "Name2"}] };
HTML
<div>
<ul data-bind="foreach:SubViewMode;">
<li data-bind="text:Name">1</li>
</ul>
</div>
<div data-bind="with:SubViewMode2;">
<ul data-bind="foreach:Items">
<li data-bind="text:Name">1</li>
</ul>
</div>
示例五
事件綁定
HTML
<input type="button" value="TestButton" data-bind="click:ClickTest" />
<input type="button" value="TestButton2" data-bind="event:{click:ClickTest}" />
Knockout
TestModel.ClickTest = function () {
alert("test");
};
示例六
帶參數的事件綁定
HTML
<input type="button" value="TestButton3" data-bind="event:{click:function(data, event){ClickJoinName('arwind','gao')}}" />
Knockout
TestModel.ClickJoinName = function (FirstName, LastName) {
alert(FirstName + "," + LastName);
};
示例七
簡單observable計數器
HTML
<input type="button" value="TestCount" data-bind ="click:ClickCount" />
<span data-bind="text:CountValue"></span>Knockout
TestModel.CountValue = ko.observable(0);
TestModel.ClickCount = function () {
var v = this.CountValue();
this.CountValue(v + 1);
};
先到這裏吧 下次再說..