2012年8月25日 星期六

knockoutjs 17 if binding

knockoutjs if binding
example1:
<!DOCTYPE html>
<html>
<head>
<title>if binding example</title>
<meta charset="UTF-8"/>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
$(document).ready(function(){
ko.applyBindings({displayMessage: ko.observable(false)});
});
</script>
</head>
<body>
<!--if binding,當displayMessage為true時,其DIV內容文字顯現-->
<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>
<input type="checkbox" data-bind="checked: displayMessage" /> Display message
</body>
</html>

說明：
hide (displayMessage value is false)：   
   <body>
   <div data-bind="if: displayMessage"></div>
   <input type="checkbox" data-bind="checked: displayMessage"> Display message
   </body>
  • note：注意div內容將為空,div依然存在於DOM中，但內容文字不會存在，如果是visible bind即使處在hide但其內容文字依然存在於DOM中。
show (displayMessage value is true)：
  <body>
  <div data-bind="if: displayMessage">Here is a message. Astonishing.</div>
  <input type="checkbox" data-bind="checked: displayMessage"> Display message
  </body>

  • if binding 會直接對DOM elements 的內容操作，會直接將內容移除。
  • visible是使用CSS display:none 來隱藏，visible的隱藏DOM elements中的內容依然會存在。

example 2:

<!DOCTYPE html>
<html>
<title>if binding example</title>
<meta charset="UTF-8"/>
<script src="../lib/knockout-2.1.0.js"></script>
</head>
<body>
    <div data-bind="if: show">Here is a message. 一</div>
    <div data-bind="if: hide">Here is a message. 二</div>
    <div data-bind="if: show">Here is a message. 三</div>
    <script>
       function ViewModle() {
           this.show = ko.observable(true);
           this.hide = ko.observable(false);
       }
       ko.applyBindings(new ViewModle());
    </script>
</body>
</html><head>

結果：

Here is a message. 一
Here is a message. 三

example3:
<!DOCTYPE html>
<html>
<head>
<title>if Binding</title>
<meta charset="UTF-8"/>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
$(document).ready(function(){
    function ViewModel(){
   this.planets = [
            {name: 'Mercury', capital: null },
            {name: 'Earth', capital: { cityName: 'Barnsley' }}
]; 
}
ko.applyBindings(new ViewModel());
});
</script>
</head>
<body> <!--這裡使用foreach binding，將與ViewModel中的planets繫結，
    將會迭代planets陣列，依其長度重複ul中的內容結構-->
<ul data-bind="foreach: planets">
    <li>
        <!--這裡使用text binding，將與ViewModel中的name繫結-->
        Planet: <b data-bind="text: name"></b>
        <!--這裡使用if binding，將與ViewModel中的 capital 繫結-->
        <div data-bind="if: capital">        <!--這裡使用text binding，因為父層DIV沒有使用with繫結，所以要依物件結構呼叫繫結目標-->
            Capital: <b data-bind="text: capital.cityName"></b>
        </div>
    </li>
</ul>
</body>
</html>

結果：
  • Planet: Mercury
  • Planet: Earth
    Capital: Barnsley
HTML 原始碼內容： 

<body>
<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name">Mercury</b>
        <div data-bind="if: capital"></div>  <-DOM存在，其內容文字不存在。
    </li>

     <li>
        Planet: <b data-bind="text: name">Earth</b>
        <div data-bind="if: capital">                                  
            Capital: <b data-bind="text: capital.cityName">Barnsley</b>
        </div>                                                         
    </li>
</ul>
</body>

note: if bind的繫結屬性若為null、undefined、0則都視為false.


example4 使用xml 註解方式操作 if bind:
  • 注意程式碼中紅色註解為knockoutjs框架中所使用的xml註解宣告binding。
<!DOCTYPE html>
<html>
<head>
<title>if Binding</title>
<meta charset="UTF-8"/>     
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<script>            
$(document).ready(function(){   
    function ViewModel(){
        this.planets = [
            {name: 'Mercury', capital: null },
            {name: 'Earth', capital: { cityName: 'Barnsley' }}
        ]; 
    }                       
    ko.applyBindings(new ViewModel());
}); 
</script>
</head>
<body>      
<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name"></b>
         <!-- ko if: capital -->
        <div>
            Capital: <b data-bind="text: capital.cityName"></b>
        </div>
        <!-- /ko -->
    </li>
</ul>   
</body>
</html>

結果：
  • Planet: Mercury
  • Planet: Earth
  • Capital: Barnsley
輸出畫面上雖然看起來一樣但是，若使用chrome檢查原素可見如下：

 HTML 原始碼內容：

  • 使用註解標籤方式的if binding 整各DOM elements會是不存在的。


<body>      
<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name">Mercury</b>
         <!-- ko if: capital --><!-- /ko -->  <-注意DIV將不存在,陣列中第一筆capital為null。
    </li>

     <li>
        Planet: <b data-bind="text: name">Earth</b>
        <!-- ko if: capital --> <-內容生成，因為陣列中第二筆資料的capital存在。
        <div>                                                          
            Capital: <b data-bind="text: capital.cityName">Barnsley</b>
        </div>                                                         
        <!-- /ko -->
    </li>
</ul>
</body>
於

沒有留言:

張貼留言