KnockoutJS-綁定元素

　　工做變動，又走回了WPF，一個來月沒有接觸web開發了，以前的KnockoutJS卻不想放棄，繼續進行知識的鞏固，下個月開始從新走回web開發之路，仍是得用回一些習慣了的工具。本次開始接觸各綁定元素功能、用法，這些綁定方式是在使用ko過程當中用的最多的。

 

綁定元素在KnockoutJS中能夠分爲三大類

　　一、文本控制與顯示隱藏

　　二、流程控制

　　三、配合表單使用

 

從我的使用過程當中應用程度進行排序展現：

一、value：在DOM元素與viewModel對象的屬性間創建橋樑，用戶編輯控件時viewModel中對應屬性值將自動更新，一樣在更新了對應屬性後，用戶控件展現數據也將自動更新。經常使用於input、select、textarea等控件；

二、text：綁定到DOM元素上，將viewModel對象的屬性的值展現在綁定元素上。經常使用於p、pre、label、span、th、td等控件使用；

三、click：綁定到DOM元素上添加事件句柄，當點擊事件被觸發時，執行咱們定義好的JS函數。經常使用於button、input、a等控件使用。

　　click說明：在綁定函數時，能夠指定任意函數，即在viewModel中聲明的函數和在viewModel以外聲明的函數均可被調用，同時在調用viewModel以內的函數時能夠直接寫函數名，而無需帶上viewModel對象名。

四、visible:綁定到DOM元素上，該元素的隱藏或顯示將有viewModel的屬性狀態、函數返回值或表達式來決定。

針對前四個綁定元素，簡單演示一下功能：

Html:

 1 <div>
 2     <label>公司名稱</label>
 3     <input type="text" data-bind="value:unitName" /><br />
 4     <label>公司地址</label>
 5     <input type="text" data-bind="value:address" /><br />
 6     <p data-bind="text:'您的公司名稱爲:'+unitName()+'，公司地址是:'+address()+' .'"></p>
 7     <pre data-bind="text:'您的公司名稱爲:'+unitName()+'，公司地址是:'+address()+' .'"></pre>
 8     <label data-bind="text:'您的公司名稱爲:'+unitName()+'，公司地址是:'+address()+' .'"></label><br />
 9     <span data-bind="text:'您的公司名稱爲:'+unitName()+'，公司地址是:'+address()+' .'"></span><br />
10     <table>
11         <tr>
12             <th data-bind="text:unitName"></th>
13         </tr>
14         <tr>
15             <td data-bind="text:address"></td>
16         </tr>
17     </table>
18     <div data-bind="visible:visibleButton">
19         <button data-bind="click: updateUnitName">修改公司名稱爲中部星城科技</button><br />
20         <button data-bind="click: updateAddress">修改公司地址爲湖南長沙雨花區</button>
21     </div>
22     <div>
23         <button data-bind="click:function(){viewModel.visibleButton(false);}">隱藏上面兩個按鈕</button>
24     </div>
25 </div>

JS代碼:

 1 <script type="text/javascript">
 2     var viewModel = {
 3         //value、text
 4         unitName: ko.observable(""),
 5         address: ko.observable(""),
 6 
 7         //click
 8         //viewModel內JS函數
 9         updateAddress: function () {
10             this.address("湖南長沙雨花區");
11         },
12 
13         //visible
14         visibleButton: ko.observable(true),
15     };
16 
17     //任意JS函數
18     function updateUnitName() {
19         viewModel.unitName("中部星城科技");
20     }
21 
22     $(function () {
23         ko.applyBindings(viewModel);//完成綁定
24     });
25 </script>

 動畫效果圖：

 

五、options：該綁定元素只用於在select中使用，經過關聯viewModel中提供的數組，使得select控件可以展現出數組中的全部項。

　　options，用於綁定下拉列表中各項（可選參數-optionsCaption，在默認情形下不想選擇任何一個option項時，給予提示語，諸如「---請選擇---」、或「---------」之類的，做爲默認選項，該項的值爲undefined）。

　　optionsText,用於肯定下拉列表中每一項的指定屬性做爲展現列，並能夠在此基礎上進行擴展，將指定屬性傳入函數中加工返回新的展現信息，。

　　optionsValue,用於肯定下拉列表中每一項的指定屬性做爲標識列。

六、checked：綁定到type爲checkbox的input控件上，關聯viewModel的屬性狀態，相互間的變更都會使得雙方更新狀態，狀態有選中和未選中。僅用於input控件指定類型爲checkbox時使用。

七、css：將一個或多個class動態綁定到DOM元素上，根據具體業務變動綁定的class。經常使用於class之間大範圍樣式的切換，經過設計JS函數完成指定class是否啓用。注意：在設計class時若是存在不合法的命名下，如my-class需轉換爲‘my-class’。

八、style：做用效果小於css，將一個或多個style的值綁定到DOM元素上，經常使用於單個或少數量style變動時使用。

九、attr：更改DOM元素的任何屬性值，關聯viewModel上對應的attr屬性值，便於動態更改展現。注意：在取屬性名稱時若是存在不合法的命名下，如data-something需轉換爲'data-something'。

針對該五個綁定元素，簡單演示一下功能：

Html:

 1 <div style="margin-top:50px;">
 2     <style type="text/css">
 3         .testClass {
 4             background-color: #ffd800;
 5             font-size: 16px;
 6         }
 7     </style>
 8     <label>公司類型：</label>
 9     <select data-bind="options:unitTypeOptions, optionsCaption:'---請選擇公司類型---',optionsText: 'text', optionsValue: 'value', value:choiceUnitTypeValue"></select><br />
10     <input type="checkbox" data-bind="checked:visibleLabel" /><label data-bind="css: { testClass: visibleLabel}">啓用展現</label>
11     <label data-bind="text:'選中值：'+choiceUnitTypeValue(),visible:visibleLabel"></label><br />
12     <a data-bind="attr: { title: tips},style:{'background-color':visibleLabel()?'red':'white'}">公司官網</a>
13     <button data-bind="click:function(){viewModel.tips('knockoutJS');}">切換a標籤提示信息</button>
14 </div>

JS代碼:

 1 <script type="text/javascript">
 2     var viewModel = {
 3         //value、text
 4         unitName: ko.observable(""),
 5         address: ko.observable(""),
 6 
 7         //click
 8         //viewModel內JS函數
 9         updateAddress: function () {
10             this.address("湖南長沙雨花區");
11         },
12 
13         //visible
14         visibleButton: ko.observable(true),
15 
16         //options
17         unitTypeOptions: ko.observableArray([
18             { text: "有限公司", value: "1" },
19             { text: "有限責任公司", value: "2" },
20             { text: "國有獨資公司", value: "3" },
21             { text: "股份有限公司", value: "4" }
22         ]),
23         choiceUnitTypeValue: ko.observable(),
24 
25         //checked
26         visibleLabel: ko.observable(true),
27 
28         //attr
29         tips: ko.observable("hello"),
30     };
31 
32     //任意JS函數
33     function updateUnitName() {
34         viewModel.unitName("中部星城科技");
35     }
36 
37     $(function () {
38         ko.applyBindings(viewModel);//完成綁定
39     });
40 </script>

動畫效果圖：

 

十、html：綁定到DOM元素上，並將viewModel的屬性值做爲展現，與text用法相同，但不一樣處在於，html能夠將內容中存在的html標記渲染爲真實的html內容。(我的建議少用或不用)

十一、event：爲DOM元素的事件添加指定的事件句柄，事件被觸發時執行咱們定義好的邏輯。經常使用在keypress、mouseover、mouseout事件上。與click用法同樣，能夠設置爲任意的js函數。

十二、submit：綁定在表單上用於提交時攔截默認表單提交動做，執行咱們定義好的邏輯，而後真正執行提交操做,該提交表單操做能夠是原有form表單提交，也能夠是咱們設計的表單提交，經過參數設置。僅用於form控件。

1三、enable：綁定DOM元素自身的啓用禁用狀態，關聯viewModel的屬性狀態，來控制該DOM元素的啓用。經常使用於input、select、textarea等控件中。

1四、disable：與enable功能相同，使用方式相反，當disable爲true時將被禁用。經常使用於input、select、textarea等控件中。

1五、selectedOptions：在multi-select列表中,選擇一個或多個項，並將選中的項加入到selectedOptions關聯的viewModel的屬性數組中。經常使用於多選項選擇。

針對該六個綁定元素，簡單演示一下功能：

Html:

 1 <div style="margin-top:50px;">
 2     <label>html元素所綁定的內容爲：</label>
 3     <label data-bind="html:htmlContent"></label><br />
 4     <div data-bind="event:{mouseover:buttonKeyPress}">
 5         鼠標移入改變html元素綁定內容
 6     </div>
 7     <hr />
 8     <form action="@Url.Action("CreateUser")" method="post" data-bind="submit:submitForm">
 9         <label>用戶名：</label>
10         <input type="text" name="userName" data-bind="enable:userNameEnable" />
11         <label>密碼：</label>
12         <input type="text" name="password" data-bind="disable:passwordDisable" />
13         <input type="submit" value="增長" />
14     </form><br />
15     <button data-bind="click:function(){viewModel.userNameEnable(true);}">啓用用戶名輸入</button>
16     <button style="margin-left:10px;" data-bind="click:function(){viewModel.passwordDisable(false);}">啓用密碼輸入</button><br />
17     <hr />
18     <p>
19         <select data-bind="options: companyOptions,selectedOptions: chosenCompanies" size="5" multiple="true"></select>
20         <select data-bind="options: chosenCompanies," size="5"></select>
21     </p>
22 </div>

JS代碼：

 1 <script type="text/javascript">
 2     var viewModel = {
 3           
 4         //html
 5         htmlContent: ko.observable("<a href='#'>百度一下</a>"),
 6 
 7         //event
 8         buttonKeyPress: function () {
 9             this.htmlContent("keyPress事件被觸發！");
10         },
11 
12         //submit
13         submitForm: function (formElement) {
14             //執行邏輯
15             //執行表單提交
16             //或返回到默認表單提交return true
17             return true;
18         },
19 
20         //enable
21         userNameEnable: ko.observable(false),
22 
23         //disable
24         passwordDisable: ko.observable(true),
25 
26         //selectedOptions
27         companyOptions: ko.observableArray(['百度', '阿里', '騰訊']),
28         chosenCompanies: ko.observableArray(['百度'])
29     };
30 
31     //任意JS函數
32     function updateUnitName() {
33         viewModel.unitName("中部星城科技");
34     }
35 
36     $(function () {
37         ko.applyBindings(viewModel);//完成綁定
38     });
39 </script>

動畫效果圖：

1六、uniqueName：綁定DOM元素有一個非空的name屬性，在沒有設置name屬性下，會綁定上一個而惟一的name屬性。(使用場景太少，我的尚未使用過)

 

0、foreach: 綁定到DOM元素上，將關聯的viewModel中指定集合或數組循環輸出，並動態更改html代碼。配合table、div等控件使用。(我的最喜歡的綁定元素，強大的存在)

Html：

 1 <table class="table table-bordered" style="margin-top:5px;">
 2     <thead>
 3         <tr>
 4             <th>公司名稱</th>
 5             <th>公司地址</th>
 6             <th></th>
 7         </tr>
 8     </thead>
 9     <tbody data-bind="foreach:unitList">
10         <tr>
11             <td><input type="text" data-bind="value:unitName" /></td>
12             <td><input type="text" data-bind="value:address" /></td>
13             <td><button class="btn btn-danger" data-bind="click:$root.removeUnitInfo">刪除</button></td>
14         </tr>
15     </tbody>
16     <tfoot>
17         <tr>
18             <td colspan="3">
19                 <button type="button" class="btn btn-primary" data-bind="click:addUnitInfo">增長</button>
20             </td>
21         </tr>
22     </tfoot>
23 </table>
24 <div>
25     <label>現有公司信息列表:</label>
26     <div data-bind="foreach:unitList">
27         <label data-bind="text:'公司名稱:'+unitName()+'.公司地址:'+address()+'.'"></label><br />
28     </div>
29 </div>

JS代碼：

 1 <script type="text/javascript">
 2     function unitViewModel(name, addressInfo) {
 3         unitName = ko.observable(name);
 4         address = ko.observable(addressInfo);
 5     }
 6 
 7     var viewModel = {
 8         unitList: ko.observableArray(),
 9 
10         addUnitInfo: function () {
11             viewModel.unitList.push(new unitViewModel("", ""));
12         },
13         removeUnitInfo: function (unit) {
14             viewModel.unitList.remove(unit);
15         },
16     };
17 
18     $(function () {
19         ko.applyBindings(viewModel);//完成綁定
20         viewModel.unitList.push(new unitViewModel("星城科技", "湖南-長沙"));
21         viewModel.unitList.push(new unitViewModel("星城集團", "湖南-長沙"));
22         viewModel.unitList.push(new unitViewModel("中車集團", "湖南-株洲"));
23     });
24 </script>

動畫效果圖：

　本次對於全部綁定元素進行了簡單的功能講解和操做，後期將會綜合運用這些完成一些功能。

　本文地址： http://www.javashuo.com/article/p-qgprptsa-ge.html

　本文demo地址：https://gitee.com/530521314/koInstance.git

 

2018-08-26,望技術有成後能回來看見本身的腳步