KnockoutJS 3.X API 第四章之click绑定

You've clicked 0timesClick me

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

<ul data-bind="foreach: places">
<li>
<span data-bind="text: $data"></span>
<button data-bind="click: $parent.removePlace">Remove</button>
</li>
</ul>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
// The current item will be passed as the first parameter, so we know which place to remove
self.removePlace = function(place) {
self.places.remove(place)
}
}
ko.applyBindings(new MyViewModel());
</script>

<button data-bind="click: myFunction">
Click me
</button>
<script type="text/javascript">
var viewModel = {
myFunction: function(data, event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
ko.applyBindings(viewModel);
</script>

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
Click me
</button>

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>

<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>

ko.options.useOnlyNativeEvents = true;