BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【一】

更新時(shí)間：2016年05月10日 14:42:23 作者：懶得安分

KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。通過本文給大家介紹BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【一】，感興趣的朋友一起學(xué)習(xí)吧

Bootstrap是一個(gè)前端框架，解放Web開發(fā)者的好東東，展現(xiàn)出的UI非常高端大氣上檔次，理論上可以不用寫一行css。只要在標(biāo)簽中加上合適的屬性即可。

KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。非常棒。比如列表數(shù)據(jù)項(xiàng)增減后，不需要重新刷新整個(gè)控件片段或自己寫JS增刪節(jié)點(diǎn)，只要預(yù)先定義模板和符合其語(yǔ)法定義的屬性即可。簡(jiǎn)單的說，我們只需要關(guān)注數(shù)據(jù)的存取。

一、Knockout.js簡(jiǎn)介

1、Knockout.js和MVVM

如今，各種前端框架應(yīng)接不暇，令人眼花繚亂，有時(shí)不得不感嘆作為程序猿也真是苦逼，總有學(xué)不完的技術(shù)，何時(shí)是盡頭，除非你轉(zhuǎn)化！苦海無(wú)邊，回頭是不是岸，由你決定！

Knockout.js是一個(gè)基于MVVM模式的輕量級(jí)的前端框架，有多輕？根據(jù)官網(wǎng)上面顯示的最新版本v3.4.0，僅22kb。能夠友好地處理數(shù)據(jù)模型和界面DOM的綁定，最重要的是，它的綁定是雙向的，也就是說數(shù)據(jù)模型變化了，界面DOM上的數(shù)據(jù)也會(huì)跟著發(fā)生變化，反過來，界面DOM上的數(shù)據(jù)變化了，數(shù)據(jù)模型也會(huì)相應(yīng)這個(gè)變化。這樣能夠大大減少我們的前端代碼量，并且使得我們界面易于維護(hù)，再也不用寫一大堆事件監(jiān)控?cái)?shù)據(jù)模型和界面DOM的變化了。下面博主會(huì)根據(jù)一個(gè)使用實(shí)例來說明這兩點(diǎn)。

Knockout.js官網(wǎng)：http://knockoutjs.com

Knockout.js開源地址：https://github.com/knockout/knockout

MVVM模式：這是一種創(chuàng)建用戶界面的設(shè)計(jì)模式，MVVM把它拆分成三塊就是Model、View、ViewModel，Model就是數(shù)據(jù)模型，View就是我們的視圖，ViewModel就是一個(gè)視圖模型，用來綁定數(shù)據(jù)模型和視圖上面的dom元素。如果你使用過WPF和Silverlight，理解這個(gè)應(yīng)該不是啥問題；沒有使用過也什么關(guān)系，看完此文，你會(huì)有一個(gè)大致的認(rèn)識(shí)。

2、最簡(jiǎn)單的實(shí)例

一般來說，如果你從零開始使用Knockout.js，你至少需要做以下四部

2.1、去官網(wǎng)下載knockout.js文件，然后引用到view頁(yè)面里面。

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>

注意：knockout.js并不需要jquery的支持，如果你的項(xiàng)目需要用到j(luò)query的相關(guān)操作，則引用jquery；否則只引用以上文件即可。

2.2、定義ViewModel

viewmodel是什么？其實(shí)，在js里面，它看上去就像一個(gè)json對(duì)象。我們定義一個(gè)viewmodel：

var myViewModel = {
Name: "Lilei",
profession: "軟件工程師",
};

2.3、view視圖里面定義綁定data-bind的標(biāo)簽

<div> 
姓名：<label data-bind="text:Name"></label><br />
職業(yè)：<input type="text" data-bind="textinput:Profession" />
</div>

注意：對(duì)應(yīng)input標(biāo)簽的文本，需要使用textinput，而普通標(biāo)簽的文本使用text即可。

2.4、激活綁定

做了以上三步，還需要激活knockout的綁定

ko.applyBindings(myViewModel);

做到這四部，基本實(shí)現(xiàn)了一個(gè)最簡(jiǎn)單的viewmodel的數(shù)據(jù)綁定。得到效果：

如果你夠細(xì)心，會(huì)發(fā)現(xiàn)ko.applyBindings()方法有兩個(gè)參數(shù)，第一個(gè)就是我們需要綁定的viewmodel，第二個(gè)又是什么呢？由 ko.applyBindings(myViewModel); 可知，第二個(gè)參數(shù)是一個(gè)可選參數(shù)，它表示viewmodel綁定的標(biāo)簽的作用域，比如，我們將以上代碼改一下：

<div> 
姓名：<label id="lb_name" data-bind="text:Name"></label><br />
職業(yè)：<input type="text" data-bind="textinput:Profession" />
</div> 
ko.applyBindings(myViewModel,document.getElementById("lb_name"));

得到結(jié)果：

由此可知：第二個(gè)參數(shù)限定了myViewModel的作用范圍，也就是說，只有在id="lb_name"的標(biāo)簽上面綁定才會(huì)生效，如果第二個(gè)參數(shù)是div等容器標(biāo)簽，它表示該綁定的范圍為該div下面的所有子標(biāo)簽。

3、監(jiān)控屬性

截止到上面的四步，我們看不到任何效果，看到的無(wú)非就是將一個(gè)json對(duì)象的的數(shù)據(jù)綁定到了html標(biāo)簽上面，這樣做有什么意義呢？不是把簡(jiǎn)單的問題復(fù)雜化嗎？別急，馬上見證奇跡！上文說了，knockout最重要的意義在于雙向綁定，那么如何實(shí)現(xiàn)我們的雙向綁定呢？答案就是監(jiān)控屬性。

在knockout里面，核心的有三個(gè)監(jiān)控屬性：Observables,DependentObservables,ObservableArray，Observe的意思翻譯過來是觀察、觀測(cè)的意思，如果說成觀察屬性或者觀測(cè)屬性感覺不太恰當(dāng)，我們暫且叫監(jiān)控屬性。

3.1、Observables：監(jiān)控屬性

我們將上面的例子改成這樣：

<head>
<meta name="viewport" content="width=device-width" />
<title>Index3</title>
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
</head>
<body>
<div> 
姓名：<label data-bind="text:Name"></label><br />
職業(yè)：<input type="text" data-bind="textinput:Profession" />
</div>
<div>
<input type="text" id="txt_testobservable" />
</div>
<script type="text/javascript">
//1.定義ViewModel
var myViewModel = {
Name: ko.observable("Lilei"),
Profession: "軟件工程師",
};
//2.激活綁定
ko.applyBindings(myViewModel);
$(function () {
//注冊(cè)文本框的textchange事件
$("#txt_testobservable").on("input", function () {
myViewModel.Name($(this).val());
});
});
</script>
</body>

ko.observable("Lilei") 這一句的意義是將viewmodel的Name屬性添加成為監(jiān)控屬性，一定Name屬性變成監(jiān)控屬性，神奇的事情就發(fā)生了，我們來看看當(dāng)我們寫myViewModel.的時(shí)候：

Name由原來的屬性變成方法了，也就是說一旦添加了ko.observable()，那么對(duì)應(yīng)的屬性就會(huì)變成方法，那么對(duì)于Name的取值和賦值都需要使用myViewModel.Name()來處理。我們先來看看效果：

代碼釋疑：很顯然 myViewModel.Name($(this).val()); 這一句將當(dāng)前文本框的值賦給了Name屬性，由于界面綁定了Name屬性，所以label里面的值也隨之發(fā)生了變化?；蛘吣銜?huì)說，這個(gè)使用textchange事件也可以做到的，只要將當(dāng)前文本框的值賦給label標(biāo)簽，也可以達(dá)到這個(gè)效果，這個(gè)不算什么。確實(shí)，你的寫法也可以達(dá)到目的，但是我們的監(jiān)控屬性的意義在于，任何地方改變了Name的值，界面都會(huì)隨之變化，而不用每個(gè)地方去給label標(biāo)簽賦值，JS里面只需要把關(guān)注點(diǎn)方法myViewModel.Name()上面即可。是不是很厲害~~

3.2、DependentObservables：監(jiān)控依賴屬性

如果看了上面的監(jiān)控屬性還沒過癮？下面再來看看監(jiān)控依賴屬性的使用。

我們將代碼再改下看看：

<head>
<meta name="viewport" content="width=device-width" />
<title>Index3</title>
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
</head>
<body>
<div> 
姓名：<input type="text" data-bind="textinput:Name" /><br />
職業(yè)：<input type="text" data-bind="textinput:Profession" /><br />
描述：<label data-bind="text:Des"></label>
</div>
<script type="text/javascript">
//1.定義ViewModel
var myViewModel = {
Name: ko.observable("Lilei"),
Profession: ko.observable("軟件工程師"),
};
myViewModel.Des = ko.dependentObservable(function () {
return "本人姓名——" + myViewModel.Name() + "，職業(yè)——" + myViewModel.Profession();
});
//2.激活綁定
ko.applyBindings(myViewModel);</script>
</body>

先來看看效果：

代碼釋疑：通過添加監(jiān)控依賴屬性 ko.dependentObservable() 將Des屬性的值能同時(shí)監(jiān)控到Name和Profession兩個(gè)的變化，其中任何一個(gè)發(fā)生變化，Des綁定的標(biāo)簽都會(huì)觸發(fā)改變，這樣做的最大好處就是避免了我們js去操作dom的麻煩，有點(diǎn)意思吧。

3.3、ObservableArray；監(jiān)控?cái)?shù)組

除了上面兩種，ko還支持對(duì)數(shù)組對(duì)象的監(jiān)控。我們來看一個(gè)例子：

<head>
<meta name="viewport" content="width=device-width" />
<title>Index3</title>
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
</head>
<body>
<div><select data-bind="options:deptArr,
optionsText:'Name'"></select>
</div>
<div>
<input type="text" id="txt_testobservable" /><input type="button" id="btn_test" value="新增部門" />
</div>
<script type="text/javascript">
var deptArr = ko.observableArray([
{ id: 1, Name: '研發(fā)部' },
{ id: 2, Name: '行政部' },
{ id: 3, Name: '人事部' }
]);
var viewModel = {
deptArr: deptArr,
};
ko.applyBindings(viewModel);
var i=4;
$(function () {
$("#btn_test").on("click", function () {
deptArr.push({ id: i++, Name: $("#txt_testobservable").val() });
});
});
</script>
</body>

看看效果：

代碼釋疑：以上通過ko.observableArray()這個(gè)方法添加了對(duì)數(shù)組對(duì)象的監(jiān)控，也就是說，js里面任何地方只要對(duì)deptArr數(shù)組對(duì)象做了數(shù)組的改變，都會(huì)觸發(fā)UI給出相應(yīng)。需要注意的一點(diǎn)是，監(jiān)控?cái)?shù)組實(shí)際上是監(jiān)控的數(shù)組對(duì)象本身，對(duì)于數(shù)組對(duì)象里面的子對(duì)象屬性發(fā)生變化，是無(wú)法監(jiān)控到的。比如我們將點(diǎn)擊事件改成這樣：

$(function () {
$("#btn_test").on("click", function () {
deptArr[1].Name = "aaa";
});
});

效果：

由此說明數(shù)組監(jiān)控實(shí)際上監(jiān)控的是數(shù)組對(duì)象本身，對(duì)于數(shù)組里面元素的屬性變化不會(huì)監(jiān)控。如果確實(shí)需要對(duì)數(shù)據(jù)里面對(duì)象的屬性變化進(jìn)行監(jiān)控，需要再對(duì)數(shù)據(jù)里面對(duì)象屬性使用ko.observable()，兩者聯(lián)合使用。有興趣的可以試試。

4、ko里面常見的data-bind屬性

上文中，我們使用了多個(gè)data-bind屬性，那么在knockout里面，到底有多少個(gè)這種data-bind的屬性呢。這里我們列出一些常用的屬性。

4.1、text和inputText

text，顧名思義就是文本的意思，這個(gè)綁定屬性一般用于<label>、<span>、<div>等標(biāo)簽顯示文本，當(dāng)然，如果你愿意，任何標(biāo)簽都可以使用這個(gè)綁定。它是使用基本上沒什么好說的。如果沒有使用ko.observable()，則是靜態(tài)綁定，否則是動(dòng)態(tài)綁定。

inputText，input標(biāo)簽的文本，相當(dāng)于input標(biāo)簽的value屬性。

　　<div> 
姓名：<label data-bind="text:Name"></label><br />
職業(yè)：<input type="text" data-bind="textinput:Profession" />
</div> 
　　　　 //1.定義ViewModel
var myViewModel = {
Name: ko.observable("Lilei"),
Profession: "軟件工程師",
};
//2.激活綁定
ko.applyBindings(myViewModel);

4.2、value

這個(gè)綁定屬性一般用于input標(biāo)簽，和上面的inputText基本相似。只不過value更加規(guī)范。

和value一起使用的還有一個(gè)參數(shù)valueUpdate，它表示界面做一個(gè)什么操作的時(shí)候更新該value。valueUpdate主要取值有change/keyup/keypress/afterkeydown等。分別表示文本變化、鍵盤縮起、鍵盤按下、鍵盤按下之后等操作時(shí)候更新value對(duì)應(yīng)的viewmodel的值。

姓名：
<input type="text" data-bind="value:Name,valueUpdate:'keyup'" /><br /> 
　　　　var myViewModel = {
Name: ko.observable("Lilei"),
};//2.激活綁定
ko.applyBindings(myViewModel);

上述代碼表示鍵盤收起的時(shí)候更新文本框的value屬性和myViewModel的Name屬性。

4.3、checked

checked綁定一般用于checkbox、radio等可以選中的表單元素，它對(duì)應(yīng)的值是bool類型。和value的用法基本相似，就不做重復(fù)說明。

4.4、enable

enable綁定一般用于是否啟用標(biāo)簽元素，一般用于表單元素的啟用和禁用。和disabled相反，對(duì)應(yīng)的值也是bool類型。

<div>
<input type="text" data-bind="enable:IsMen"/>
</div>
<script type="text/javascript">
//1.定義ViewModel
var myViewModel = {
Name: ko.observable("Lilei"),
Profession: ko.observable("軟件工程師"),
Age: ko.observable(40),
IsMen:ko.observable(true)
};
//2.激活綁定
ko.applyBindings(myViewModel);
myViewModel.IsMen(false);
</script>

由于IsMen屬性變成了false，所有對(duì)應(yīng)的文本框會(huì)顯示禁用狀態(tài)。

4.5、disabled

和enable相反，用法和enable類似。

4.6、options

上文中在使用select的綁定時(shí)候使用過options，它表示select標(biāo)簽的option的集合，對(duì)應(yīng)的值為一個(gè)數(shù)組，表示這個(gè)下拉框的數(shù)據(jù)源?？梢允褂胦bservableArray啟用對(duì)這個(gè)數(shù)據(jù)源的監(jiān)控。用法見上面。

4.7、html

text綁定實(shí)際上是對(duì)標(biāo)簽innerText的設(shè)置和取值，那么同理，html綁定也是對(duì)innerHTML的設(shè)置和取值。它對(duì)應(yīng)的值為一段html標(biāo)簽。

4.8、css

css綁定是添加或刪除一個(gè)或多個(gè)樣式（class）到DOM元素上。使用格式：

<style type="text/css">
.testbold {
background-color:powderblue;
}
</style> 
<div data-bind="css:{testbold:myViewModel.Name()=='Lilei'}">aaaa</div> 
var myViewModel = {
Name: ko.observable("Lilei"),
Profession: ko.observable("軟件工程師"),
Age:ko.observable(40)
};

該div會(huì)顯示背景色。

如果需要增加或移除多個(gè)樣式，只要稍微改下即可，比如：

<div data-bind="css:{testbold:myViewModel.Name()=='Lilei',testborder:myViewModel.Profession()=='PHP工程師'}">aaaa</div>

4.9、style

如果css綁定的作用是向標(biāo)簽動(dòng)態(tài)添加或移除class樣式，那么style綁定的作用就是想標(biāo)簽動(dòng)態(tài)添加或移除某一個(gè)樣式。比如：

<div data-bind="css:{background-color:myViewModel.Name()=='Lilei'?'red':'white'}">aaaa</div>

如果是添加或者移除多個(gè)，同css綁定的用法

4.10、attr

attr綁定主要用于向標(biāo)簽添加移除某一個(gè)或多個(gè)屬性（包括自定義屬性），永和和css類似。

4.11、click

click綁定表示在對(duì)應(yīng)的DOM元素上面添加點(diǎn)擊事件的執(zhí)行方法。可以在任意元素上面使用。

<div>
<input type="button" value="測(cè)試click綁定" data-bind="click:ClickFunc" />
</div> 
　　　　var myViewModel = {
ClickFunc:function(){
alert($(event.currentTarget).val());
}
};
ko.applyBindings(myViewModel);

event.currentTarget表示當(dāng)前點(diǎn)擊的DOM元素。有時(shí)為了簡(jiǎn)便，我們直接使用匿名函數(shù)的方式綁定，比如：

<div>
<input type="button" value="測(cè)試click綁定" data-bind="click:function(){
alert('點(diǎn)擊了');
}" />
</div>

但是這種將js揉到html里面的寫法讓博主難以接受，并且覺得維護(hù)起來相對(duì)不方便，尤其是點(diǎn)擊事件里面的邏輯略復(fù)雜時(shí)。所以，如非必須，不建議直接寫這種匿名函數(shù)的方式。

4.12、其他

關(guān)于data-bind的所有綁定，可以看官網(wǎng)上面的介紹，這里就不一一列舉了。需要用的時(shí)候去官網(wǎng)上查下就好了。看看官網(wǎng)上面列舉的所有綁定：

5、Json對(duì)象和監(jiān)控屬性的轉(zhuǎn)化及關(guān)系

我們知道，為了避免不同語(yǔ)言直接的展現(xiàn)方式，一般情況下我們前端和后端交互的時(shí)候統(tǒng)一使用Json格式的數(shù)據(jù)，我們通過http請(qǐng)求從后端取到的數(shù)據(jù)模型，而要使用我們的ko的一些特性，必須要將這些普通的數(shù)據(jù)模型轉(zhuǎn)換成ko的監(jiān)控屬性；反過來，我們使用ko的監(jiān)控屬性，有時(shí)又需要把這些屬性轉(zhuǎn)換為普通的json數(shù)據(jù)傳到后臺(tái)，那么如何實(shí)現(xiàn)這個(gè)轉(zhuǎn)換呢？

5.1、JSON對(duì)象轉(zhuǎn)換成ViewModel

比如我們從后臺(tái)取到一個(gè)Json對(duì)象，然后把它變成到我們的viewmodel，然后綁定到我們的界面DOM。

$.ajax({
url: "/Home/GetData",
type: "get",
data: {},
success: function (data, status) {
var oJson = data;
}
});

我們發(fā)送一個(gè)請(qǐng)求到后端，取到一個(gè)json對(duì)象，賦值到oJson，然后我們把oJson轉(zhuǎn)換成viewmodel，最直觀的方式就是手動(dòng)轉(zhuǎn)換了。比如我們可以這樣：

　　　　var myViewModelJson = {
DeptName: ko.observable(),
DeptLevel: ko.observable(),
DeptDesc:ko.observable()
};
ko.applyBindings(myViewModelJson);

然后在ajax請(qǐng)求的success里面

success: function (data, status) {
var oJson = data;
myViewModelJson.DeptName(oJson.DeptName);
myViewModelJson.DeptLevel(oJson.DetpLevel);
myViewModelJson.DeptDesc(oJson.DeptDesc);
}

這樣，通過手動(dòng)綁定，實(shí)現(xiàn)了json對(duì)象到viewmodel的綁定。這樣做的好處就是靈活，壞處顯而易見，手工代碼量太大。

還好，有我們?nèi)f能的開源，總有人想到更好的辦法，我們使用knockout.Mapping組件就能很好地幫助我們界面json對(duì)象到viewmodel的轉(zhuǎn)換。

knockout.Mapping開源地址：下載

下面來簡(jiǎn)單看看它如何使用，還是上面的例子，我們不用實(shí)現(xiàn)定義任何viewmodel，首先需要引用knockout.mapping.js

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
<script src="~/scripts/knockout/extensions/knockout.mapping-latest.js"></script>

注意：這里knock.mapping-lastest.js必須要放在knockout-3.4.0.min.js的后面，否則調(diào)用不到ko.mapping。

然后直接在success函數(shù)里面這樣使用

　　　　　　　　　success: function (data, status) {
var myViewModelJson2 = ko.mapping.fromJS(data);
ko.applyBindings(myViewModelJson2);
}

我們來看效果：

代碼釋疑：通過ajax請(qǐng)求從后臺(tái)取到的json對(duì)象，通過ko.mapping.fromJS()，很方便地將其轉(zhuǎn)換成了viewmodel，是不是猴犀利！當(dāng)然除了這種用法，還可以更新已經(jīng)存在viewmodel，使用如下：

　　　　var myViewModelJson = {
DeptName: ko.observable(),
DeptLevel: ko.observable(),
DeptDesc:ko.observable()
};
ko.applyBindings(myViewModelJson);
$(function () {
$.ajax({
url: "/Home/GetData",
type: "get",
data: {},
success: function (data, status) {
ko.mapping.fromJS(data, myViewModelJson)
}
});
});

在success里面，根據(jù)data的值去更新myViewModelJson這個(gè)viewmodel。

5.2、ViewModel轉(zhuǎn)換成JSON對(duì)象

上面說了JSON對(duì)象轉(zhuǎn)化為viewmodel，那么反過來，如果我們需要將viewmodel轉(zhuǎn)換為Json對(duì)象傳遞到后端，怎么辦呢？

knockout里面提供了兩個(gè)方法：

•ko.toJS()：將viewmodel轉(zhuǎn)換為JSON對(duì)象
•ko.toJSON()：將viewmodel轉(zhuǎn)換為序列化過的Json string。

比如我們的代碼如下：

$(function () {
var oJson1 = ko.toJS(myViewModelJson);
var oJson2 = ko.toJSON(myViewModelJson);
});
var myViewModelJson = {
DeptName: ko.observable("研發(fā)部"),
DeptLevel: ko.observable("2"),
DeptDesc: ko.observable("開發(fā)一伙人")
};
ko.applyBindings(myViewModelJson);

那么我們來監(jiān)控下oJson1和oJson2的值：

代碼釋疑：通過上面這張圖，很容易理解兩個(gè)方法的區(qū)別，這里需要說明一點(diǎn)的是，這兩個(gè)方法是ko自帶的，并不需要mapping組件的支持。

6、創(chuàng)建自己的data-bind屬性

上面講了那么多，都是介紹knockout里面的一些綁定和監(jiān)控，那么，有些時(shí)候，我們需要自定義我們的data-bind，型如： <label data-bind="myBind:Name"></label> ，這種需求再做組件封裝的時(shí)候尤其有用，是否可以實(shí)現(xiàn)呢？當(dāng)然可以。

在knockout里面，提供了ko.bindingHandlers屬性，用于自定義data-bind屬性，它的語(yǔ)法如下：

ko.bindingHandlers.MySelect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
}
};

就這樣申明一下，然后在我們的html標(biāo)簽里面就可以使用自定義data-bind了。

<div> 
<select data-bind="MySelect:$root">
<option id="1">研發(fā)部</option>
<option id="2">人事部</option>
<option id="3">行政部</option>
</select>
</div>

MySelect就是我們自定義的綁定屬性，$root暫且可以理解為初始化（雖然這樣解釋并不嚴(yán)謹(jǐn)，如果有更加合理的解釋歡迎指正）。

代碼釋疑：通過上面的ko.bindingHandlers就能簡(jiǎn)單實(shí)現(xiàn)自定綁定屬性，需要說明兩點(diǎn)：

•init，顧名思義初始化自定義綁定，它里面包含多個(gè)參數(shù)，一般使用較多的是前兩個(gè)參數(shù)，第一個(gè)參數(shù)表示初始化自定義綁定的DOM元素，第二個(gè)參數(shù)一般用來傳遞初始化的參數(shù)。
•update，更新回調(diào)，當(dāng)對(duì)應(yīng)的監(jiān)控屬性變化時(shí)，會(huì)進(jìn)入到這個(gè)方法。如果不需要回調(diào)，此方法可以不聲明。

在此博主就結(jié)合原來分享過的一個(gè)下拉框組件MutiSelect來簡(jiǎn)單說明下自定義綁定的使用。

6.1、最簡(jiǎn)單的MutiSelect

一般情況下，如果我們需要使用ko去封裝一些通用組件，就需要用到我們的ko.bindingHandlers，下面博主就結(jié)合MutiSelect組件來說說如何使用。

首先聲明自定義的ko.bindingHandlers，在init方法里面初始化我們的select標(biāo)簽

ko.bindingHandlers.MySelect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).multiselect();
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
}
};

然后在頁(yè)面標(biāo)簽里面使用

<div style="text-align:center;"> 
<select data-bind="MySelect:$root">
<option id="1">研發(fā)部</option>
<option id="2">人事部</option>
<option id="3">行政部</option>
</select>
</div>

最后第三部，激活綁定

$(function () {
var MultiSelect = {};
ko.applyBindings(MultiSelect);
});

如果不需要傳遞參數(shù)，這里只需要綁定一個(gè)空的viewmodel即可。有人疑惑了，第三部感覺沒啥實(shí)際意義呢。博主的理解是，DOM元素需要使用data-bind去綁定數(shù)據(jù)，必須要啟用ko的綁定，也就是這里的ko.applyBindings()。

得到效果：

6.2、參數(shù)傳遞

第一步還是自定義ko.bindingHandlers

ko.bindingHandlers.MySelect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var oParam = valueAccessor();
$(element).multiselect(oParam);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
}
};

第二步和上面相同，在html標(biāo)簽里面使用這個(gè)自定義綁定。

第三步，在激活綁定的時(shí)候傳入?yún)?shù)

$(function () {
var MultiSelect = {
enableClickableOptGroups: true,//收起分組
onChange: function (option, checked) {
alert("選擇改變");
}
};
ko.applyBindings(MultiSelect);
});

通過這三步即可將參數(shù)傳到我們的MutiSelect的初始化里面：

代碼釋疑：init事件的第二個(gè)參數(shù)，我們說了，它主要作用是獲取我們viewmodel里面?zhèn)鬟^來的參數(shù)，只不過這里要把它當(dāng)做方法使用，為什么會(huì)這么用，還有待研究！

二、第一個(gè)增刪改查實(shí)例

至此基礎(chǔ)的東西終于是鋪墊完了，本來打算一篇搞定的，可以沒料到基礎(chǔ)的東西展開來這么多篇幅！增刪改查的示例放到下篇BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【二】，歡迎學(xué)習(xí)交流，當(dāng)然也歡迎推薦！

您可能感興趣的文章: