Knockoutjs屬性綁定(Bindings)之流程控制(Control flow)

在上一篇《Knockoutjs屬性綁定(Bindings)之控制文本和外觀(Controlling text and appearance)》我們介紹了怎么樣為View層的組件綁定對應的屬性，這篇文章我們接着介紹Knockoutjs的屬性綁定，這次我們主要介紹的是怎么樣通過Knockoutjs來控制組件的流程顯示（比如循環、判斷是否顯示等）。

一、foreach binding

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

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

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

 

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

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

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

二、if binding  和 if not binding

（1）、使用if binding可以控制某個組件動態顯示，類似我們之前接觸到的visible屬性，不過此屬性綁定過以后就不能更改，而if binding可以根據相應的條件控制組件是否顯示，下面是一個簡單的例子：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label> 
  
<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>
  
<script type="text/javascript">
    ko.applyBindings({
        displayMessage: ko.observable(false)
    });
</script>

此例根據checkbox是否勾選來控制是否顯示下面的一個<div>。
我們也可以使用if來判斷某個元素是否為null，如果為null則不會顯示，如下：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<ul data-bind="foreach: planets"> 
    <li> 
        Planet: <b data-bind="text: name"> </b> 
        <div data-bind="if: capital"> 
            Capital: <b data-bind="text: capital.cityName"> </b> 
        </div> 
    </li> 
</ul> 
  
  
<script>
    ko.applyBindings({
        planets: [
            { name: 'Mercury', capital: null },
            { name: 'Earth', capital: { cityName: 'Barnsley'} }
        ]
    }); 
</script>

此例中如果capital為null，則不會進行顯示。此時，如果沒有if進行判斷的話，則在使用capital.cityName時就會出錯。
（2）、if not binding的使用方法和if binding的使用方法一樣，這里就不作介紹了。

三、with binding

我們可以使用with binding來重新定義一個上下文綁定，比如：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<h1 data-bind="text: city"> </h1> 
<p data-bind="with: coords"> 
    Latitude: <span data-bind="text: latitude"> </span>, 
    Longitude: <span data-bind="text: longitude"> </span> 
</p> 
  
<script type="text/javascript">
    ko.applyBindings({
        city: "London",
        coords: {
            latitude: 51.5001524,
            longitude: -0.1262362
        }
    }); 
</script>

這樣我們在使用coords下的latitude和longitude的時候我們就不需要使用coords.latitude來調用了，因為我們使用with:coords來指定了coords的上下文，當我們使用coords下面的屬性時就可以直接使用了。
下面提供一個動態交互的例子：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<form data-bind="submit: getTweets"> 
    Twitter account: 
    <input data-bind="value: twitterName" /> 
    <button type="submit">Get tweets</button> 
</form> 
  
<div data-bind="with: resultData"> 
    <h3>Recent tweets fetched at <span data-bind="text: retrievalDate"> </span></h3> 
    <ol data-bind="foreach: topTweets"> 
        <li data-bind="text: text"></li> 
    </ol> 
  
    <button data-bind="click: $parent.clearResults">Clear tweets</button> 
</div>
  
<script type="text/javascript">
    function AppViewModel() {
        var self = this;
        self.twitterName = ko.observable('@StephenFry');
        self.resultData = ko.observable(); // No initial value 

        self.getTweets = function () {
            twitterApi.getTweetsForUser(self.twitterName(), function (data) {
                self.resultData({
                    retrievalDate: new Date(),
                    topTweets: data.slice(0, 5)
                });
            });
        }

        self.clearResults = function () {
            self.resultData(undefined);
        }
    }

    ko.applyBindings(new AppViewModel()); 
</script>

以上就是流程控制的全部內容。