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订阅的更多相关文章

  1. KnockoutJS 3.X API 第三章 计算监控属性(3) KO如何实现依赖追踪

    KO是如何实现自动更新的 初学者可以掠过该篇,如果你是一个刨根问底的开发者,那本节将告诉你KO是如何实现依赖追踪和UI自动更新的. 其实很简单,KO的依赖追踪算法如下: 当你声明一个计算监控属性,KO ...

  2. 前端开发框架Bootstrap和KnockoutJS

    江湖中那场异常惨烈的厮杀,如今都快被人遗忘了.当年,所有的武林同道为了同一个敌人都拼尽了全力,为数不多的幸存者心灰意冷,隐姓埋名,远赴他乡,他们将唯一的希望寄托给时间.少年子弟江湖老,红颜少女的鬓边也 ...

  3. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  4. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  5. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(二)

    前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...

  6. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

  7. SpreadJS 中应用 KnockoutJS 技术

    SpreadJS 支持 Knockout (KO)技术, KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库,允许双向数据绑定,使数据和UI界面进行实时的交互更新.关于KO的 ...

  8. JS组件系列——KnockoutJS用法

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  9. BootstrapTable+KnockoutJS

    BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查   前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用 ...

随机推荐

  1. 2.WF 4.5 流程引擎设计思路

    本文主要给大家分享下基于WF 4.5框架的流程引擎设计思路 1.流程启动时的数据写入EventMsgPP对象中,ObjectAssemblyType记录流程启动时需要的类型,ObjectContent ...

  2. Ubuntu/CentOS 系统上安装与配置Nginx

    一.在线安装: Ubuntu:sudo apt-get install nginx CentOS: sudo yum install nginx 二.安装后的位置: 1.服务地址:/etc/init. ...

  3. go 通过http发送图片file内容

    package main import ( "encoding/json" "fmt" "io/ioutil" "net/http ...

  4. 归并排序——Merge Sort

    基本思想:参考 归并排序是建立在归并操作上的一种有效的排序算法.该算法是采用分治法的一个非常典型的应用.首先考虑下如何将2个有序数列合并.这个非常简单,只要从比较2个数列的第一个数,谁小就先取谁,取了 ...

  5. koa2搭建服务器

    首先初始化项目 npm init -y 安装koa2 npm install koa --save 项目根目录 新建 index.js //这是最基本的服务 const Koa = require(' ...

  6. LearnOpenGL学习笔记(二)——着色器简单理解

    着色器在OpenGL中发挥着重要作用,它就像一个画笔,将输入的数据流,转为数学坐标,再将三维坐标变成二维坐标(针对我们现在用的二维显示器,全息显示器肯是三维的),再把二维坐标实际的像素点位置(这里面肯 ...

  7. resin4.0.25 安装配置 及结合eclipse开发

    resin4.0.25 安装配置 及结合eclipse开发 本文大部分内容是对官网的翻译,及自己配置后的一些体会. 一.  基于win  ,resin基本安装1,安装jdk1.6或更高版本2,配置环境 ...

  8. 微信小程序开发总结(一)

    微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...

  9. JavaWeb学习(二十九)———— 事务

    一.事务的概念 事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功. 例如:A——B转帐,对应于如下两条sql语句  update from account set mone ...

  10. windows7安装flask-mysqldb遇到的坑

    最近在windows环境上搭建flask使用环境,遇到过很多坑,这次就记录下安装flask-mysqldb所遇到的坑. 正常逻辑是使用pip install flask-mysqldb进行安装.但是会 ...