with绑定

我们可以使用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>

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