1.場景：如下圖，當選擇定期存款時，輸入框右邊出現紅色的必輸項星號，當選擇活期存款時，不再出現該星號。
2.思路一：不使用knockout，直接用click事件，就可以實現這個需求，代碼如下：
<html>
<head>
</head>
<body >
<input id="Radio3" name="rdoCunKuanType" data-bind="checked:CunKuanType" onclick="document.getElementById('f1').style.display = 'inline'" value="H" checked type="radio" />活期存款
<input id="Radio4" name="rdoCunKuanType" data-bind="checked:CunKuanType" onclick="document.getElementById('f1').style.display = 'none'" value="D" type="radio">定期存款
<br />定期幾年：<input type="text" />年 <font id="f1" color="red">*</font>
</body>
</html>
3.思路二：使用Knockout的click事件及監控屬性.
代碼如下：
htm
<head> <script src="../lib/require/require.js" data-main="ko1_radio3_main"></script> </head> <body > <input id="Radio3" name="rdoCunKuanType" data-bind="checked:CunKuanType,click:RadioClick" value="H" checked type="radio" />活期存款 <input id="Radio4" name="rdoCunKuanType" data-bind="checked:CunKuanType,click:RadioClick" value="D" type="radio">定期存款 <br />定期幾年：<input type="text" />年 <font data-bind="visible:ShowStar" color="red">*</font> </body> </html>
js
require.config({
paths: {
"knockout": "../lib/knockout/knockout-2.3.0",
"jquery": "../lib/jquery/jquery-1.9.1.min"
}
});
require(['jquery', 'knockout'], function ($, ko) {
//數據綁定
$(document).ready(function () {
var viewModel = {
CunKuanType: ko.observable("H"),
ShowStar: ko.observable(false), //匯往國家及地區星號顯示標示符
RadioClick: function () {
if (viewModel.CunKuanType() == "D") {
viewModel.ShowStar(true);
}
else {
viewModel.ShowStar(false);
}
return true;
}
};
ko.applyBindings(viewModel);
});
});
需要注意的是，RadioClick最后一定要返回一個true，否則click事件無效。
4.思路三：完全不用click事件，純粹用監控依賴屬性就可以搞定.
這個最符合Knockout所主張的思想了，一個屬性變了，它本身並不引發操作，而是利用監控它也就訂閱它的方法自動引發操作，不必再寫click了，代碼如下：
htm
<html> <head> <script src="../lib/require/require.js" data-main="ko1_radio1_main"></script> </head> <body > <input id="Radio1" name="rdoCunKuanType" data-bind="checked:CunKuanType" value="H" checked type="radio" />活期存款 <input id="Radio2" name="rdoCunKuanType" data-bind="checked:CunKuanType" value="D" type="radio">定期存款 <br />定期幾年：<input type="text" />年 <font data-bind="visible:ShowStar" color="red">*</font> </body> </html>
js
require.config({
paths: {
"knockout": "../lib/knockout/knockout-2.3.0",
"jquery": "../lib/jquery/jquery-1.9.1.min"
}
});
require(['jquery', 'knockout'], function ($, ko) {
//數據綁定
$(document).ready(function () {
var viewModel = {
CunKuanType: ko.observable("H")
};
viewModel.ShowStar = ko.dependentObservable(function ()
{
if (viewModel.CunKuanType() == "H")
{
return false;
}
else
{
return true;
}
}, viewModel);
ko.applyBindings(viewModel);
});
});