knockoutjs data-bind 聲明式綁定整理

1、Visible綁定

1.功能

　　Visible綁定經過綁定一個值來肯定DOM元素顯示或隱藏

2.示例

<div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. </div>
<script type="text/javascript">
    var viewModel = { shouldShowMessage: ko.observable(true) // Message initially visible 
 }; viewModel.shouldShowMessage(false); // ... now it's hidden 
    viewModel.shouldShowMessage(true); // ... now it's visible again
</script>

3.說明
　　當參數設置爲一個假值(例如bool型值false、整型值0、null或者undefined)時，該綁定會設置yourElement.style.display爲none，讓元素隱藏。它的優先級高於任何你在CSS中定義的隱藏樣式。

　　當參數設置爲一個真值(例如bool型值true、不等於null、Object對象或數組)時，該綁定會去掉yourElement.style.display值，讓元素顯示。

　　

　　注意，任何你在CSS中定義的樣式會當即應用生效。

　　若是參數是一個observable值，visible綁定使得元素的visible狀態隨着參數值的變化而變化。若是參數不是observable值，visible綁定僅僅會設置元素visible狀態一次，之後不會再更新。

 

　　注意：你能夠選擇使用JavaScript函數或者表達式做爲參數值。這樣的話，KO將會運行你的函數或者表達式，返回的結果來控制元素顯示或者隱藏。

2、Text綁定

1.功能

　　Text綁定主要是讓DOM元素顯示參數值。

　　一般狀況下，該綁定在<span>和<em>這樣的元素上很是有用，而實際上你能夠綁定任何元素。

2.示例

Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript">   
 var viewModel = { myMessage: ko.observable() // Initially blank 
 }; viewModel.myMessage("Hello, world!"); // Text appears
</script>

3.說明
　　Knockout將參數值設置爲元素內容。元素以前的內容將會被覆蓋。

 

　　若是參數是一個observable值，text綁定將會在值變化時更新元素text內容。若是參數不是observable值，text綁定僅僅會設置元素內容一次，之後不會再更新。

　　若是你傳入的不是一個值或者一個字符串（好比：你傳入一個對象或者數組）那麼顯示的文本將是yourParameter.toString()的結果。

 

3、html綁定

1.功能
　　html綁定到DOM元素上，使得該元素顯示的HTML值爲你綁定的參數。若是在你的view model裏聲明HTML標記而且render的話，那很是有用。

 2.示例

<div data-bind="html: details"></div> 
<script type="text/javascript">
var viewModel = { details: ko.observable() // Initially blank 
}; viewModel.details("<em>For further details, 
view the report <a href='report.html'>here</a>.</em>"); // HTML content appears
</script>

3.說明
　　KO設置該參數值到元素的innerHTML屬性上，元素以前的內容將被覆蓋。

　　若是參數是監控屬性observable的，那元素的內容將根據參數值的變化而更新，若是不是，那元素的內容將只設置一次而且之後不在更新。

　　若是你傳的是否是數字或者字符串（例如一個對象或者數組），那顯示的文本將是yourParameter.toString()的等價內容。

 

　　注意：由於該綁定設置元素的innerHTML，你應該注意不要使用不安全的HTML代碼，由於有可能引發腳本注入攻擊。若是你不確信是否安全（好比顯示用戶輸入的內容），那你應該使用text綁定，由於這個綁定只是設置元素的text 值innerText和textContent。

4、CSS類名綁定

1.功能

　　css綁定是添加或刪除一個或多個CSS class到DOM元素上。 很是有用，好比當數字變成負數時高亮顯示。（注：若是你不想應用CSS class而是想引用style屬性的話，請參考style綁定。）

2.示例

<div data-bind="css: { profitWarning: currentProfit() < 0 }"> Profit Information </div> 
<script type="text/javascript">
var viewModel = { currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class 
}; viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
</script>

　效果就是當currentProfit 小於0的時候，添加profitWarning CSS class到元素上，若是大於0則刪除這個CSS class。

view會隨着監控屬性的變化自動添加或者刪除元素上的CSS class。

3.說明　

　　該參數是一個JavaScript對象，屬性是你的CSS class名稱，值是比較用的true或false，用來決定是否應該使用這個CSS class。

　　你能夠一次設置多個CSS class。例如，若是你的view model有一個叫isServre的屬性，

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

5、Style屬性綁定

1.功能

　　style綁定是添加或刪除一個或多個DOM元素上的style值。好比當數字變成負數時高亮顯示，或者根據數字顯示對應寬度的Bar。（注：若是你不是應用style值而是應用CSS class的話，請參考CSS綁定。）

2.示例

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }"> Profit Information </div>
<script type="text/javascript">
var viewModel = { currentProfit: ko.observable(150000) // Positive value, so initially black 
 }; viewModel.currentProfit(-50); // Causes the DIV's contents to go red</script>

當currentProfit 小於0的時候div的style.color是紅色，大於的話是黑色。

　　view會隨着監控屬性的變化自動添加或者刪除該元素的style值

3.說明
　　該參數是一個JavaScript對象，屬性是你的style的名稱，值是該style須要應用的值。

　　你能夠一次設置多個style值。例如，若是你的view model有一個叫isServre的屬性，

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }"> ... </div>

　若是參數是監控屬性observable的，那隨着值的變化將會自動添加或者刪除該元素上的style值。若是不是，那style值將會只應用一次而且之後不在更新。

　　你可使用任何JavaScript表達式或函數做爲參數。KO將用它的執行結果來決定是否應用或刪除style值。

6、attr屬性綁定

1.功能

　　這個綁定能夠用於給DOM元素添加自定義屬性，或綁定到已有的屬性：

　　attr 綁定提供了一種方式能夠設置DOM元素的任何屬性值。你能夠設置img的src屬性，鏈接的href屬性。使用綁定，當模型屬性改變的時候，它會自動更新。

2.示例

<a data-bind="attr: { href: url, title: details }"> Report </a>
<script type="text/javascript">
var viewModel = { url: ko.observable("year-end.html"), details: ko.observable("Report including final year-end statistics") }; </script>

　呈現結果是該鏈接的href屬性被設置爲year-end.html， title屬性被設置爲Report including final year-end statistics。

3.說明
　　該參數是一個JavaScript對象，屬性是你的attribute名稱，值是該attribute須要應用的值。

　　若是參數是監控屬性observable的，那隨着值的變化將會自動添加或者刪除該元素上的attribute值。若是不是，那attribute值將會只應用一次而且之後不在更新。

　　

　　注意：應用的屬性名字不是合法的JavaScript變量命名

　　若是你要用的屬性名稱是data-something的話，你不能這樣寫：

<div data-bind="attr: { data-something: someValue }">...</div>

由於data-something 不是一個合法的命名。解決方案是：在data-something兩邊加引號做爲一個字符串使用。這是一個合法的JavaScript 對象 文字（從JSON技術規格說明來講，你任什麼時候候都應該這樣使用，雖然不是必須的）。例如,

<div data-bind="attr: { ‘data-something’: someValue }">...</div>

7、foreach綁定

1.功能

　　使用此功能能夠方便咱們循環遍歷輸出某個數組、集合中的內容。

2.示例

（1）、循環遍歷輸出數組

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <table> 
     <thead> 
         <tr><th>First name</th><th>Last name</th></tr> 
     </thead> 
     <tbody data-bind="foreach: people"> 
         <tr> 
             <td data-bind="text: firstName"></td> 
             <td data-bind="text: lastName"></td> 
         </tr> 
     </tbody> 
 </table> 
   
 <script type="text/javascript"> ko.applyBindings({ people: [ { firstName: 'Bert', lastName: 'Bertington' }, { firstName: 'Charles', lastName: 'Charlesforth' }, { firstName: 'Denise', lastName: 'Dentiste' } ] }); </script>

（2）、動態增長和刪除遍歷節點

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <h4>People</h4> 
 <ul data-bind="foreach: people"> 
     <li> Name at position <span data-bind="text: $index"> </span>: <span data-bind="text: name"> </span> 
         <a href="#" data-bind="click: $parent.removePerson">Remove</a> 
     </li> 
 </ul> 
 <button data-bind="click: addPerson">Add</button>
   
 <script type="text/javascript"> function AppViewModel() { var self = this; self.people = ko.observableArray([ { name: 'Bert' }, { name: 'Charles' }, { name: 'Denise' } ]); self.addPerson = function () { self.people.push({ name: "New at " + new Date() }); }; self.removePerson = function () { self.people.remove(this); } } ko.applyBindings(new AppViewModel()); </script>

（3）、若是咱們想要輸出數組中的全部元素而不是像例一中使用firstName去指定元素的話，咱們可使用$data來進行輸出。好比：

ript type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <ul data-bind="foreach: months"> 
     <li> The current item is: <b data-bind="text: $data"></b> 
     </li> 
 </ul> 
   
 <script type="text/javascript"> ko.applyBindings({ months: ['Jan', 'Feb', 'Mar', 'etc'] }); </script>

　固然，咱們也可使用$data來調用數組中具體的元素，好比咱們要使用$data調用例1中的firstName的話，咱們可使用$data.firstName來輸出firstName。

（4）、使用$index、$parent等其餘的上下文屬性
　　咱們曾在例2中使用了$index來表示咱們數組的下標，$index是Knockoutjs爲咱們提供的屬性，咱們能夠直接引用，它會隨着數組等下標的變化動態變化的，好比若是數組的長度減小了1，$index的值也會跟着減小的。

　　咱們也可使用$parent來使用foreach元素以外的屬性，好比：

<h1 data-bind="text: blogPostTitle"></h1> 
<ul data-bind="foreach: likes"> 
    <li> 
        <b data-bind="text: name"></b> likes the blog post <b data-bind="text: $parent.blogPostTitle"></b> 
    </li> 
</ul>

　這裏使用$parent來調用foreach循環體以外的blogPostTitle屬性。

（5）、使用"as"爲foreach中的元素定義別名

　　咱們可使用$data來代替數組中的元素，同時咱們也可使用as來爲咱們要遍歷的元素起一個別名。

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <ul data-bind="foreach: { data: categories, as: 'category' }"> 
     <li> 
         <ul data-bind="foreach: { data: items, as: 'item' }"> 
             <li> 
                 <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> 
             </li> 
         </ul> 
     </li> 
 </ul> 
   
 <script>
     var viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: ['Apple', 'Orange', 'Banana'] }, { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach'] } ]) }; ko.applyBindings(viewModel); </script>

　在使用的時候咱們要注意，起別名使用的是as:'category'而不是as:category。

（6）、在沒有綁定屬性的狀況下使用foreach

　　有的時候咱們想要循環輸出一些特殊的內容，好比咱們想要輸入下面文本中的<li></li>標籤：

<ul> 
     <li class="header">Header item</li> 
     <!-- The following are generated dynamically from an array --> 
     <li>Item A</li> 
     <li>Item B</li> 
     <li>Item C</li> 
 </ul>

若是咱們想要循環輸出上面代碼中的<li></li>標籤的話，咱們就沒有一個能夠綁定foreach的元素，此時咱們能夠經過如下的代碼來實現：

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <ul> 
     <li class="header">Header item</li> 
     <!-- ko foreach: myItems --> 
         <li>Item <span data-bind="text: $data"></span></li> 
     <!-- /ko --> 
 </ul> 
   
 <script type="text/javascript"> ko.applyBindings({ myItems: ['A', 'B', 'C'] }); </script>

　咱們使用<!--ko--><!--/ko-->來表示循環的開始和結束，這是一個虛擬的標籤，Knockoutjs可以對其中的foreach進行綁定就好像你將foreach綁定到了一個真實的標籤上同樣。

（7）、默認不顯示被標示爲刪除的元素
　　有的時候咱們要跳過數組中的一些元素，此時這些元素已經被標示爲刪除，但並無被真實刪除，這些元素當咱們使用foreach輸出的時候是默認不顯示的，若是咱們想要這些元素顯示的話，咱們可使用includeDestroyed這個選項，好比：

<div data-bind='foreach: { data: myArray, includeDestroyed: true }'> ... </div>

 8、click綁定

1.功能

　　click綁定在DOM元素上添加事件句柄以便元素被點擊的時候執行定義的JavaScript 函數。大部分是用在button，input和鏈接a上，可是能夠在任意元素上使用。

2.示例

<div> You've clicked
    <span data-bind="text: numberOfClicks">
    </span> times <button data-bind="click: incrementClickCounter"> Click me </button>
</div>
<script type="text/javascript">
    var viewModel = { numberOfClicks: ko.observable(0), incrementClickCounter: function() { var previousCount = this.numberOfClicks(); this.numberOfClicks(previousCount + 1); } }; </script>

3.說明
　　Click點擊事件時所執行的函數。

　　你能夠聲明任何JavaScript函數 – 不必定非要是view model裏的函數。你能夠聲明任意對象上的任何函數，例如：someObject.someFunction。

　　View model上的函數在用的時候有一點點特殊，就是不須要引用對象的，直接引用函數自己就好了，好比直接寫incrementClickCounter就能夠了，而無需寫成：viewModel.incrementClickCounter（儘管是合法的）。

　　ps：每次點擊按鈕的時候，都會調用incrementClickCounter()函數，而後更新自動更新點擊次數。

 

9、value 綁定

1.功能
　　value綁定是關聯DOM元素的值到view model的屬性上。主要是用在表單控件<input>，<select>和<textarea>上。

　　當用戶編輯表單控件的時候， view model對應的屬性值會自動更新。一樣，當你更新view model屬性的時候，相對應的元素值在頁面上也會自動更新。

　　注：你應該在checkbox或者radio上使用checked綁定來讀取或者寫入元素的 checked狀態，而不是value 值的綁定。

2.示例

<p> Login name: <input data-bind="value: userName" />
</p>
<p> Password: <input type="password" data-bind="value: userPassword" />
</p>
<script type="text/javascript">
    var viewModel = { userName: ko.observable(""), // Initially blank userPassword: ko.observable("abc"), // Prepopulate };
        
</script>

3.說明
　　KO設置此參數爲元素的value值。以前的值將被覆蓋。

　　若是參數是監控屬性observable的，那元素的value值將根據參數值的變化而更新，若是不是，那元素的value值將只設置一次而且之後不在更新。

　　若是你提供的參數不是一個數字或者字符串（而是對象或者數組）的話，那顯示的value值就是yourParameter.toString() 的內容（一般沒用，因此最好都設置爲數字或者字符串）。

　　無論何時，只要你更新了元素的值，那 KO都會將view model對應的屬性值自動更新。默認狀況下當用戶離開焦點（例如onchange事件）的時候，KO才更新這個值，可是你能夠經過第2個參數valueUpdate來特別指定改變值的時機。

4.其餘
valueUpdate
　　若是你使用valueUpdate參數，那就是意味着KO將使用自定義的事件而不是默認的離開焦點事件。下面是一些最經常使用的選項：

　　「change」（默認值） - 當失去焦點的時候更新view model的值，或者是<select> 元素被選擇的時候。

　　「keyup」 – 當用戶敲完一個字符之後當即更新view model。

　　「keypress」 – 當用戶正在敲一個字符但沒有釋放鍵盤的時候就當即更新view model。不像 keyup，這個更新和keydown是同樣的。

　　「afterkeydown」 – 當用戶開始輸入字符的時候就更新view model。主要是捕獲瀏覽器的keydown事件或異步handle事件。

　　上述這些選項，若是你想讓你的view model進行實時更新，使用「afterkeydown」是最好的選擇。

示例：

<p> Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
</p>
<p> You have typed: <span data-bind="text: someValue">
    </span>
</p>
<!-- updates in real-time -->
<script type="text/javascript">
    var viewModel = { someValue: ko.observable("edit me") }; </script>

10、event綁定

1.功能

　　event綁定在DOM元素上添加指定的事件句柄以便元素被觸發的時候執行定義的JavaScript 函數。大部分狀況下是用在keypress，mouseover和mouseout上。

2.示例

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div>
    <div data-bind="visible: detailsEnabled"> Details </div>
</div>
<script type="text/javascript">
    var viewModel = { detailsEnabled: ko.observable(false), enableDetails: function() { this.detailsEnabled(true); }, disableDetails: function() { this.detailsEnabled(false); } }; </script>

3.說明
　　你須要傳入的是一個JavaScript對象，他的屬性名是事件名稱，值是你所須要執行的函數。

　　你能夠聲明任何JavaScript函數 – 不必定非要是view model裏的函數。你能夠聲明任意對象上的任何函數，例如：event: { mouseover: someObject.someFunction }。

　　View model上的函數在用的時候有一點點特殊，就是不須要引用對象的，直接引用函數自己就好了，好比直接寫event: { mouseover: enableDetails }就能夠了，而無需寫成：event: { mouseover: viewModel.enableDetails }（儘管是合法的）。

　　ps：每次鼠標在第一個元素上移入移出的時候都會調用view model上的方法來toggle detailsEnabled的值，而第二個元素會根據detailsEnabled的值自動顯示或者隱藏。