knockoutjs data-bind 聲明式綁定整理 - xuwendong－IT工程師數位筆記本

文章出處

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

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds