knockoutjs关于ko.bindingHandlers的updata订阅
ko.bindingHandlers是先执行init进行初始化数据的绑定(如果需要执行updata进行数据更新可以不用初始化);
init: function(element, valueAccessor) {
//初始化数据--然后执行updata进行需要更新数据的绑定,添加订阅
//如果在updata进行了数据的执行,init可以添加初始化事件
var value = valueAccessor(); // Get the current value of the current property we're bound to
$(element).text(value); // jQuery will hide/show the element depending on whether "value" or true or false
},
ko.bindinHandlers.init
在updata里面,才是订阅产生的时候,而不是在init的时候,数据就绑定了订阅;
update: function(element, valueAccessor, allBindings) {
var value = ko.unwrap(valueAccessor()); //执行更新数据绑定,必须要执行一次否则无法确定添加订阅
//var value = valueAccessor()(); // Get the current value of the current property we're bound to
$(element).text(value);
}
ko.dindingHandlers.updata
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/knockout-3.4.0.debug.js"></script>
<script type="text/javascript">
ko.bindingHandlers.slideVisible = {
init: function(element, valueAccessor) {
//初始化数据--然后执行updata进行需要更新数据的绑定,添加订阅
//如果在updata进行了数据的执行,init可以添加初始化事件
var value = valueAccessor(); // Get the current value of the current property we're bound to
$(element).text(value); // jQuery will hide/show the element depending on whether "value" or true or false
},
update: function(element, valueAccessor, allBindings) {
var value = ko.unwrap(valueAccessor()); //执行更新数据绑定,必须要执行一次否则无法确定添加订阅
//var value = valueAccessor()(); // Get the current value of the current property we're bound to
$(element).text(value);
}
};
var model = {
te: ko.observable("ttttttttt"),
aaa: function() {
this.te("aaaaaaaaaaaaaaaaaaaa");
}
}
window.onload = function() {
ko.applyBindings(model, document.body)
}
</script>
</head> <body>
<div data-bind="slideVisible:te"></div>
<input type="button" value="aaaaaaaaa" data-bind="click:aaa" />
</body>
</html>
ko.bindingHandlers.model
注:小七目前还是小白,写的博客为笔记类型的博客,是在项目中遇到的问题,仅用于学习。
涉及到原理部分还未做总结。
如果内容有不对、不全面或者其他的问题,欢迎大家纠正。
knockoutjs关于ko.bindingHandlers的updata订阅的更多相关文章
- KnockoutJS 3.X API 第三章 计算监控属性(3) KO如何实现依赖追踪
KO是如何实现自动更新的 初学者可以掠过该篇,如果你是一个刨根问底的开发者,那本节将告诉你KO是如何实现依赖追踪和UI自动更新的. 其实很简单,KO的依赖追踪算法如下: 当你声明一个计算监控属性,KO ...
- 前端开发框架Bootstrap和KnockoutJS
江湖中那场异常惨烈的厮杀,如今都快被人遗忘了.当年,所有的武林同道为了同一个敌人都拼尽了全力,为数不多的幸存者心灰意冷,隐姓埋名,远赴他乡,他们将唯一的希望寄托给时间.少年子弟江湖老,红颜少女的鬓边也 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查
前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(二)
前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...
- SpreadJS 中应用 KnockoutJS 技术
SpreadJS 支持 Knockout (KO)技术, KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库,允许双向数据绑定,使数据和UI界面进行实时的交互更新.关于KO的 ...
- JS组件系列——KnockoutJS用法
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- BootstrapTable+KnockoutJS
BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查 前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用 ...
随机推荐
- 【Promise】Promise实现请求超时处理(基本版)
首先是没有加入请求超时的情况: var http = require('http'); var url = require('url'); function get(addr) { return ne ...
- 解决Windows英文版中文软件乱码的问题
由于工作的原因,我们的开发环境都是基于英文的,但是在打开一些基于中文编码的软件的时候经常会出现乱码的情况.其实只要打开控制面板按照下面的步骤稍微设置一下,就可以完美的在英文操作系统下支持中文软件了,因 ...
- ES启动报错最大进程数太少
[--16T18::,][INFO ][o.e.b.BootstrapChecks ] [node-] bound or publishing to a non-loopback address, e ...
- Java 8 新特性-菜鸟教程 (8) -Java 8 日期时间 API
Java 8 日期时间 API Java 8通过发布新的Date-Time API (JSR 310)来进一步加强对日期与时间的处理. 在旧版的 Java 中,日期时间 API 存在诸多问题,其中有: ...
- mybatis教程5(延迟加载和缓存)
关联关系 在关系型数据库中,表与表之间很少是独立与其他表没关系的.所以在实际开发过程中我们会碰到很多复杂的关联关系.在此我们来分析下载mybatis中怎么处理这些关系 1对1关系 我们有一张员工表(T ...
- [HEOI2016] 字符串
Description 给定长度为n的字符串,m次询问,每次询问s[a...b]的所有子串与s[c...d]的LCP的最大值.n,m<=10^5. Solution 感觉这种n,m<=10 ...
- SPI 驱动框架
SPI 驱动框架 1. 枚举过程 drivers/spi/spi.c: spi_register_board_info /* 对于每一个spi_master,调用spi_match_master_to ...
- S3C2440的中断体系结构
概述 S3C2440A中的中断控制器接受来自60个中断源的请求.提供这些中断源的可以是内部外设,如DMA控制器.UART.IIC等等.在这些中断源中,UARTn.AC97和EINTn中断对于中断控制器 ...
- net4log 日志管理
使用log4net可以很方便地为应用添加日志功能.应用Log4net,开发者可以很精确地控制日志信息的输出,减少了多余信息,提高了日志记录性能.同时,通过外部配置文件,用户可以不用重新编译程序就能改变 ...
- soapui 自动化教程
本教程主要讲述对接口的自动化测试,略过压力测试.安全测试. 最终目标是通过groovy脚本执行一个文件,发送多个任务请求.验证返回值是否符合期望. 教程从soapui入门到groovy实现回传参数.生 ...