knockoutjs data-bind 聲明式綁定整理

阿新 • • 發佈：2017-08-21

名稱 destroy when this 表達式註意 appear javascrip knockout

一、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將會運行你的函數或者表達式，返回的結果來控制元素顯示或者隱藏。

二、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()的結果。

三、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。

四、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 }">

五、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值。

六、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>

七、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來進行輸出。比如：

<script 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>

我們使用來表示循環的開始和結束，這是一個虛擬的標簽，Knockoutjs能夠對其中的foreach進行綁定就好像你將foreach綁定到了一個真實的標簽上一樣。

（7）、默認不顯示被標示為刪除的元素

　　有的時候我們要跳過數組中的一些元素，此時這些元素已經被標示為刪除，但並沒有被真實刪除，這些元素當我們使用foreach輸出的時候是默認不顯示的，如果我們想要這些元素顯示的話，我們可以使用includeDestroyed這個選項，比如：

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

八、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()函數，然後更新自動更新點擊次數。

九、value 綁定

1.功能

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

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

　　註：如果你在checkbox或者radio button上使用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>

十、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的值自動顯示或者隱藏。

參考資料：http://www.aizhengli.com/knockoutjs/knockoutjs.html

knockoutjs data-bind 聲明式綁定整理

名稱 destroy when this 表達式註意 appear javascrip knockout 一、Visible綁定 1.功能　　Visible綁定通過綁定一個值來確定DOM元素顯示或隱藏 2.示例 <div data-bind="visi

knockoutjs data-bind 聲明式綁定整理

一、Visible綁定

1.功能

2.示例

3.說明

二、Text綁定

1.功能

2.示例

3.說明

三、html綁定

1.功能

2.示例

3.說明

四、CSS類名綁定

1.功能

2.示例

3.說明

五、Style屬性綁定

1.功能

2.示例

3.說明

六、attr屬性綁定

1.功能

2.示例

3.說明

七、foreach綁定

1.功能

2.示例

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

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

（3）、如果我們想要輸出數組中的所有元素而不是像例一中使用firstName去指定元素的話，我們可以使用$data來進行輸出。比如：

（4）、使用$index、$parent等其他的上下文屬性

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

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

（7）、默認不顯示被標示為刪除的元素

八、click綁定

1.功能

2.示例

3.說明

九、value 綁定

1.功能

2.示例

3.說明

4.其他

valueUpdate

十、event綁定

1.功能

2.示例

3.說明

參考資料：http://www.aizhengli.com/knockoutjs/knockoutjs.html

相關推薦

3.說明　