//世界上有10种人看不懂标题,而且都是不懂二进制的。
knockoutjs中
自带的checked绑定 要求checked需要是bool类型true/false,但是实际项目中很多时候checkbox并不是分组,单个,而且后台更喜欢用"1","0"去标示。比如性别中的isboy。knockoutjs提供了自定义的绑定(custom binding),下面来看自定义的check10绑定实现:
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div id="f">
<label for="isboy">isboy?</label><input type="checkbox" id="isboy" data-bind="checked10:isboy" />
<br/>
<span data-bind="text:isboy"></span>
</div>
<script type="text/javascript">
ko.bindingHandlers.checked10 = {
init: function (element, valueAccessor) {
var updateHandler = function () {
var elementValue = element.checked ? "1" : "0",
modelValue = valueAccessor(),
currentValue = ko.utils.unwrapObservable(modelValue);
if (elementValue === currentValue)
return;
if (ko.isObservable(modelValue)) {
modelValue(elementValue);
}
};
ko.utils.registerEventHandler(element, "click", updateHandler);
},
update: function (element, valueAccessor) {
element.checked = ("1" == ko.utils.unwrapObservable(valueAccessor()));
}
};
var viewModel = {
isboy:ko.observable("0")
};
ko.applyBindings(viewModel,document.getElementById("f"));
</script>
演示地址:http://jsbin.com/eduhac/2
init方法在ko.applyBindings时触发,可以监听事件来响应用户输入,同事更新到viewModel中。update方法是在viewModel中值发生变化时触发,这时候需要更新相应的UI。
自定义绑定可以参考http://knockoutjs.com/documentation/custom-bindings.html