knockout.js 自定义bindingHandler

2019独角兽企业重金招聘Python工程师标准>>>

在ko中我们通过handler来根据绑定的值进行操作，内置的功能已十分强大，但往往我们还有些特殊的需求，例如希望与jquery插件共用，让元素绑定时就通过jquery初始化。下面我们来讲下如何自定义

我需要看看我绑定了什么值，方便进行调试

ko.bindingHandlers.console = {
    init: (element, valueAccessor) ->
        console.log valueAccessor()
}

<div data-bind='console: $rawData'></div>

这个栗子很简单，自己直接试试吧

开发中经常会遇到click事件只是为了让一个属性从false变为true，从true变为false，老得写事件，好麻烦哦

ko.bindingHandlers.toggle = {
    value = valueAccessor() #获取绑定的对象
    init: (element, valueAccessor) ->
        $(element).click ->
            value !value()
}

<div data-bind='toggle: bool_value'></div>

聪明如你，一定看得懂

我有一个日历控件，希望ko绑定后元素能自动初始化

ko.bindingHandlers.calendar = {
    init: (element) ->
        $(element).calendar()
}

<input type='text' data-bind='calendar: true' />

visible太挫，我要来点动画

ko.bindingHandlers.slideVisible = {
    update: (element, valueAccessor, allBindings) ->
        value = ko.unwrap valueAccessor()
        duration = allBindings.get('slideDuration') or 400
        if value is on
            $(element).slideDown duration
        else
            $(element).slideUp duration
}

<div data-bind='slideVisible: bool_value, slideDuration: 1000'>css给我弄个高度</div>

解析：bool_value是一个ko对象，内容为bool值，随着改变会触发slideVisible的update，从而根据bool_value的值来决定绑定的元素显示与否，并且可以获取相同元素内绑定的slideDuration的值来作为动画时间

转载于:https://my.oschina.net/zhengnazhi/blog/750890