學習KnockOut第三篇之List

時間 2019-11-17

標籤學習 knockout 第三 list 简体版

原文原文鏈接

學習KnockOut第三篇之Listjavascript

欲看此篇---------------------------------------------可先看上篇。html

第一步，先搭建一個大概的框架起來。至於綁定什麼的，咱們稍後慢慢進行。可能會有人問爲何我那個位置要寫一個form，關於這個呢，且埋一伏筆，稍後說明起因。咱們要作的是，當點擊「Add」按鈕時能將文本框裏的值加入的下拉框裏，當咱們選中下拉框裏的選項時點擊"Remove"也能進行刪除操做，一樣，當點擊「Sort」時也能對下拉框裏的選項進行排序。有代碼和圖：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head >
 4         <title> mutuDu's List</ title>
 5     </head >
 6     <body >
 7         <form>
 8             New Friend:
 9             <input />
10             <button> Add</ button>
11         </form>
12         <p> My Friend:</ p>
13         <select></ select>
14         <div>
15             <button> Remove</ button>
16             <button> Sort</ button>
17         </div>
18     </body >
19 </html>
20 <script src="knockout-2.2.0.js"></ script>
21 <script type="text/javascript">
22    
23 </script>

一個大概的樣子

第二步，下拉框裏什麼值都沒有，看着真難受。那麼，就來寫一下下拉框裏的綁定，也給下拉框裏一些默認的值吧。下拉框是用<select>標籤的。這裏就會涉及到 options綁定，其綁定的每每是一個是數組，而就不是單獨一個值了。這個會用到ko.observableArray()表示綁定的數組。和ko.observable()有點相似，只是一個是綁定的數組，一個是綁定的單個的值。若是要在options裏選定一個默認的選項，就須要用到selectedOptions了。這裏順便將input裏的value綁定成一個空值。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head >
 4         <title> mutuDu's List</ title>
 5     </head >
 6     <body >
 7         <form>
 8             New Friend:
 9             <input data-bind="value:itemToAdd" />
10             <button> Add</ button>
11         </form>
12         <p> My Friend:</ p>
13         <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >
14         <div>
15             <button> Remove</ button>
16             <button> Sort</ button>
17         </div>
18     </body >
19 </html>
20 <script src="knockout-2.2.0.js"></ script>
21 <script type="text/javascript">
22     var ListViewModel = function (items) {
23         this.itemToAdd = ko.observable( "");
24         this.selectedItem = ko.observableArray([ "Lina"]);//綁定數組裏的元素不能忘了中括號。
25         this.items = ko.observableArray(items);
26     };
27     ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));
28 </script>

下拉框裏沒值看着真心難受。options綁定。

第三步，就是在我寫了「New Friend」且點擊了「Add」按鈕後將個人新朋友加入到個人「My Friend」的下拉框中去。這裏就會講到我剛纔所說的埋下的伏筆了。也就會用到submit綁定。而submit就是用來綁定到form表單裏的。當咱們submit時會執行咱們定義的函數，而不會將其提交到服務器。這也是submit的一個做用，阻止其提交到服務器，而是執行咱們的函數。那麼咱們寫一個函數吧，當點擊時這個按鈕時就執行這個函數。注意寫法， sumbit綁定是在form裏寫綁定的，與下面按鈕的類型相對應（type=button）。

且說一下代碼裏的一個函數引起的其餘函數：

ListViewModel .items.push(new value);在數組末尾添加一個新項。
ListViewModel .items.sort(new value); 看到上一個，也應該知道這個是給數組排序。
ListViewModel .items.reverse(new value);那麼，這個是翻轉數組仍是翻轉數組？

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head >
 4         <title> mutuDu's List</ title>
 5     </head >
 6     <body >
 7         <form data-bind="submit:addItem"> <!--這裏寫submit綁定，和下面的submit按鈕相對應，執行addItem方法。-->
 8             New Friend:
 9             <input data-bind="value:itemToAdd" />
10             <button type="submit"> Add</ button><!--type的類型的是submit-->
11         </form>
12         <p> My Friend:</ p>
13         <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >
14         <div>
15             <button> Remove</ button>
16             <button> Sort</ button>
17         </div>
18     </body >
19 </html>
20 <script src="knockout-2.2.0.js"></ script>
21 <script type="text/javascript">
22     var ListViewModel = function (items) {
23         this.itemToAdd = ko.observable( "");
24         this.selectedItem = ko.observableArray([ "Lina"]);
25         this.items = ko.observableArray(items);
26         //這裏就是點Add時執行的方法。
27         this.addItem = function() {
28             this.items.push( this.itemToAdd());//push或者sort應該是蠻好理解的吧。
29             this.itemToAdd( "");
30         };
31     };
32     ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));
33 </script>

新朋友你過來吧。submit綁定。

第四步，將選中的項刪除，或者將數組排序，也就是一個click綁定了，當點擊刪除時刪除相應的選中項，當點擊排序時，就給排個序。其實數組是有一些默認的函數的。

ListViewModel .items.remove(someItem);刪除全部等於someItem的元素並將被刪除元素做爲一個數組返回。

ListViewModel .items.removeAll(['someItem',5926,'undefined']);刪除等於'someItem',5926,或者undefined的元素並將刪除之元素做爲數組返回。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head >
 4         <title> mutuDu's List</ title>
 5     </head >
 6     <body >
 7         <form data-bind="submit:addItem"> 
 8             New Friend:
 9             <input data-bind="value:itemToAdd" />
10             <button type="submit"> Add</ button>
11         </form>
12         <p> My Friend:</ p>
13         <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >
14         <div>
15               <button data-bind ="click:removeSelected">Remove</ button><!--click綁定,執行下面的刪除函數-->
16             <button data-bind="click:sortItems"> Sort</ button><!--click綁定，執行下面的排序函數-->
17         </div>
18     </body >
19 </html>
20 <script src="knockout-2.2.0.js"></ script>
21 <script type="text/javascript">
22     var ListViewModel = function (items) {
23         this.itemToAdd = ko.observable( "");
24         this.selectedItem = ko.observableArray([ "Lina"]);
25         this.items = ko.observableArray(items);
26         this.addItem = function() {
27             this.items.push( this.itemToAdd());
28             this.itemToAdd( "");
29         };
30         //這裏是點擊刪除時的方法。
31         this.removeSelected = function() {
32             this.items.removeAll( this.selectedItem());
33             this.selectedItem([]); //注意括號是不能掉了的。
34         };
35         //這裏是寫排序的方法
36         this.sortItems = function() {
37             this.items.sort();//上面有說到這個方法。
38         };
39     };
40     ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));
41 </script>

刪除和排序，只是兩個函數而已。

樓主，這個sort排序是按什麼規律排？java

數字是排在最前面的，按小大的順序排，而後是大寫字母開頭的文字，接着是小字字母開頭的文字，也就是大Z是在小a前面的，若是有數字，數字則是在最前面的，按從小到大的順序。

明白了，你的這個排序的話，若是隻有一個選項的話，那麼這個按鈕也就沒什麼意義了。

恩，這個倒還真是這樣。那麼應該怎麼辦比較好一點呢。

樓主，你前面講過的嘛，enable綁定嘛。

瞭然，我們就能夠enable綁定一下。如若選項的長度不大於1，那麼就將此按鈕禁用（至於要不要在禁用的同時將按鈕上的文字修改一下，感興趣的能夠嘗試一下，上一篇有扯到過這個）。

對了，固然，樓主，不止這裏哦，Add按鈕，也能夠根據input裏的內容有無進行enable綁定。Remove也能夠作到當沒有選項時就不讓按鈕不可用嘛。

確實如此，容我修改一下。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head >
 4         <title> mutuDu's List</ title>
 5     </head >
 6     <body >
 7         <form data-bind="submit:addItem">
 8             New Friend:
 9             <input data-bind="value:itemToAdd,valueUpdate:'afterkeydown'" /><!--當輸入字符時就自動更新ViewModel-->
10             <button type="submit" data-bind="enable:itemToAdd().length>0">Add </button> <!--加了enable綁定-->
11         </form>
12         <p> My Friend:</ p>
13         <select data-bind="options:items,selectedOptions:selectedItem" multiple="multiple"></select >
14         <div>
15             <button data-bind="click:removeSelected,enable:selectedItem().length>0">Remove</ button><!--加了enable綁定-->
16             <button data-bind="click:sortItems,enable:items().length>1">Sort </button> <!--加了enable綁定-->
17         </div>
18     </body >
19 </html>
20 <script src="knockout-2.2.0.js"></ script>
21 <script type="text/javascript">
22     var ListViewModel = function (items) {
23         this.itemToAdd = ko.observable( "");
24         this.selectedItem = ko.observableArray([ "Lina"]);
25         this.items = ko.observableArray(items);
26         this.addItem = function() {
27             this.items.push( this.itemToAdd());
28             this.itemToAdd( "");
29         };
30         this.removeSelected = function() {
31             this.items.removeAll( this.selectedItem());
32             this.selectedItem([]); 
33         };
34         this.sortItems = function() {
35             this.items.sort();
36         };
37     };
38     ko.applyBindings(new ListViewModel([ "Jelly", "Lina" , "Ando" ]));
39 </script>

體驗不夠好。enable綁定和value的第二個參數。

嗯，樓主，你怎麼將把那個<input>標籤里加參數了，怎麼換成了" <input data-bind="value:itemToAdd,valueUpdate:'afterkeydown'" />"?

是這樣的。ko會將VM對應的屬性值自動更新。只是其默認的是當離開焦點的時候，ko纔會自動更新這個值。這個效果不是很好，好比，就這代碼如若不加這個第二個參數的代碼的話，咱們寫了要添加的值非得將鼠標在外面點一下按鈕才顯示可用。針對此種不太友好的地方，咱們就能夠經過第二個參數改變其何時自動更新值了。也就是" valueUpdate"這個參數。「afterkeydown」則表示當用戶開始輸入字符的時候（當敲下去後）就自動了。

動態效果圖略（樓主還不會弄，想學來着，此處還請園友指導下，之後會了會補上。）

第三篇學習筆記就到這裏了。