Knockoutjs 实践入门 (2) 绑定事件
Knockoutjs 綁定事件
Knockoutjs 不僅支持UI 元素的屬性綁定到model的屬性，還支持UI 元素的事件綁定model的事件。
?
需求：
l? click me button 每單擊一次，計(jì)數(shù)器累加一次，并且把計(jì)數(shù)器次數(shù)顯示到div中
l? click me button 最大可單擊3次，3次過(guò)后click me button 不能使用;單擊次數(shù)達(dá)到3次時(shí)，顯示提示信息，并且顯示reset button
l? reset button 單擊后click me button 計(jì)數(shù)器清零,click me button 可用；提示信息與reset
button 消失
代碼實(shí)現(xiàn)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
??? <title></title>
??? <script src="js/knockout-3.3.0.debug.js" type="text/javascript"></script>
</head>
<body>
??? <form id="form1" runat="server">
??????? <div>You've clicked <span data-bind='text: numberOfClicks'> </span> times</div>
??????? <!--button? click 事件綁定model的onclick方法 -->
??????? <!--button? disable屬性綁定hasClickedTooManyTimes屬性 -->
??????? <button data-bind='click: onClick, disable: hasClickedTooManyTimes'>Click me</button>
??????? <!--div? visible hasClickedTooManyTimes -->
??????? <div data-bind='visible: hasClickedTooManyTimes'>
??????????? That's too many clicks! Please stop before you wear out your fingers.
???? <!--button? click綁定resetClicks -->
??????????? <button data-bind='click: resetClicks'>Reset clicks</button>
??????? </div>
??? </form>
??? <script type="text/javascript">
??????? var model = function () {
??????????? //計(jì)數(shù)器
??????????? this.numberOfClicks = ko.observable(0);
??????????? //onclick方法
??????????? this.onClick = function () {
??????????????? this.numberOfClicks(this.numberOfClicks() + 1);
??????????? };
??????????? //計(jì)數(shù)器重置
??????????? this.resetClicks = function () {
??????????????? this.numberOfClicks(0);
??????????? };
??????????? //hasClickedTooManyTimes 屬性
??????????? this.hasClickedTooManyTimes = ko.pureComputed(function () {
??????????????? return this.numberOfClicks() >= 3;
??????????? }, this);
??????? };
?
??? ????ko.applyBindings(new model());
??? </script>
</body>
</html>
運(yùn)行結(jié)果
第一次click
?
第三次click
?
重置
?
轉(zhuǎn)載于:https://www.cnblogs.com/hbb0b0/p/4477124.html
總結(jié)
以上是生活随笔為你收集整理的Knockoutjs 实践入门 (2) 绑定事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
