我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

knockoutjs中使用10绑定checkbox

 
//世界上有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



posted on 2012-12-12 17:14 衡锋 阅读(3215) 评论(1)  编辑  收藏 所属分类: javascriptWeb开发

评论

# re: knockoutjs中使用10绑定checkbox 2016-04-22 16:49 放大

发的发布的  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: