文档章节

knockout.js 自定义bindingHandler

桶装更尽兴
 桶装更尽兴
发布于 2016/09/23 17:45
字数 342
阅读 75
收藏 1

在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的值来作为动画时间

© 著作权归作者所有

桶装更尽兴
粉丝 37
博文 15
码字总数 9695
作品 0
汕头
程序员
私信 提问
集成 Knockout 和 Twitter Bootstrap Popover

简介 Knockout 是一个功能强大,非常有用的 javascript 库,用于实现在模板中双向绑定的 MVVM(Model-View-ViewModel) 模式,并有内置的绑定支持来绑定数据到 HTML 元件上去。 Knockout 也支持...

oschina
2014/03/10
630
0
个人整理的Knockout.js文档,有兴趣的朋友可以直接下载!

上周四在看Knockout.js的官方文档,阅读过程中顺便将其整理成了一份完整的文档,如果你此有兴趣,可以从这里下载。 P.S. Knockout.js简介[来自百度百科] Knockout是一个轻量级的UI类库,通过...

长平狐
2012/09/04
322
0
JavaScript的UI库 Knockout.js 3.2 预览:组件

JavaScript 的 UI 库 Knockout.js 3.2 预览:组件。Knockout 3.2 将会提供开箱即用的新功能,通过创建组件来实现。组件可以一步联结模板和数据(视图模块)。更多组件内容介绍请看发行说明。...

oschina
2014/06/14
3K
4
Knockout.js 3.4.2 发布,JavaScript 的 UI 库

Knockout.js 3.4.2 发布了。Knockout 是个 JavaScript library,帮助创建丰富的显示和编辑器 UI,通过干净的底层数据模型。你可以在任何时候动态更新 U I的所选择部分。 更新内容: 从循环计...

达尔文
2017/03/07
1K
2
Knockout.js 3.5.0 Beta 发布,JavaScript 的 UI 库

Knockout.js 3.5.0 beta 发布了。Knockout 是个 JavaScript library,帮助创建丰富的显示和编辑器 UI,通过干净的底层数据模型。你可以在任何时候动态更新 U I的所选择部分。 更新内容:此版...

周其
2017/12/30
782
7

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部