在ASP.NET MVC中使用Knockout实践09,自定义绑定
Knockout真正强大之处在于绑定机制,通过data-bind
属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定。
从一个例子看Knockou的绑定机制
假设想给一个button元素变成jQuery UI的button,大致这样做:
<button id="btn">点我</button>$('#btn').button( icons: { primary: 'ui-icon-gear' } );
"他山之石,可以攻玉",实际上Knockout可以通过它的绑定机制来借用其它js类库实现相同的功能。如果能做到以下这样就好了:
<button data-bind="jqButton: { icons: { primary: 'ui-icon-gear' } }">点我</button>
如果我们想给Knockout增加自定义绑定,必须通过ko.bindingHandlers
属性。
<button data-bind="click: sayHello, jqButton: { icons: { primary: 'ui-icon-gear' } }">点我</button>
@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script type="text/javascript">ko.bindingHandlers.jqButton = {init: function (element, valueAccessor) {var options = valueAccessor() || {};$(element).button(options);ko.utils.domNodeDisposal.addDisposeCallback(element, function () {$(element).button("destroy");});}};var vm = {sayHello: function () {alert("hello");}};ko.applyBindings(vm);</script>}
以上,通过ko.bindingHandlers
,增加了一个名称为jqButton
的绑定。
到这里,有必要了解一下Knockout的绑定机制了。
ko.bindingHandlers.myCustomBinding = {init: function(element, valueAccessor, allBindingsAccessor, data, context) {},update: function(element, valueAccessor, allBindingsAccessor, data, context) {}};
init
函数只在元素第一次绑定的时候运行。通常用来给元素绑定一个handler。update
函数只在View Model中,具有observable的成员值发生改变的时候被运行。
init
和update
包含5个参数:
○ element
表示实施绑定的DOM元素
○ valueAccessor
表示传值给绑定机制的函数,该函数可能是View Model中具有Observable的成员,也有可能是json对象。
○ allBindingsAccessor
用来获取运用在同一DOM元素上的所有绑定
○ data
用来获取View Model
○ context
绑定的上下文,包括$data, $parent, $parents, $root等属性
更新View Model的时候让DOM元素闪一下
绑定无非就是关乎View Model和Dom元素,现在,当View Model中具有Obserable的成员值反生变化的时候,让DOM元素闪一下(实际上就是让DOM元素先隐藏再慢慢显现)。根据绑定机制,肯定要自定义update
函数。
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<h2>Index</h2><style type="text/css">.main {background-color: #CCC;}</style><div class="main" data-bind="flash: name"><span data-bind="text: name"></span></div><hr/><input data-bind="value: name"/>@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script type="text/javascript">ko.bindingHandlers.flash = {update: function(element, valueAccessor) {ko.utils.unwrapObservable(valueAccessor());$(element).hide().fadeIn(500);}};var vm = {name: ko.observable("darren")};ko.applyBindings(vm);</script>}
每当input值发生变化,div区域总会闪一下。
给现有的绑定再套上一层绑定
比如说,Knockout已经有了一个名称为text的绑定,当View Model中具有Obserable的成员值发生改变,绑定text的DOM元素值也会随之发生变化。如果我们想让text值发生变化的时候闪动一下,该如何做呢?
<input data-bind="value: name"/><hr/><span data-bind="fadeText: name"></span>@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script type="text/javascript">ko.bindingHandlers.fadeText = {update: function(element, valueAccessor) {$(element).hide();ko.bindingHandlers.text.update(element, valueAccessor);$(element).fadeIn(500);}};var vm = {name: ko.observable("darren")};ko.applyBindings(vm);</script>}
以上,当input值发生变化的时候,span的值随之闪动并变化。
在ASP.NET MVC中使用Knockout实践09,自定义绑定的更多相关文章
- 在ASP.NET MVC中使用Knockout实践01,绑定Json对象
本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcAppl ...
- 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容
在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...
- 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证
在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...
- 在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合
本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.ob ...
- 在ASP.NET MVC中使用Knockout实践05,基本验证
本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...
- 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...
- 在ASP.NET MVC中使用Knockout实践03,巧用data参数
使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <inp ...
- 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...
- [摘]在ASP.NET MVC中使用DropDownList
在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...
随机推荐
- oracle日期、转换函数
转换函数 日期类型转换成字符类型 select to_char(sysdate) s1, --14-3月 -16 to_char(sysdate, 'yyyy-mm-dd') s2, - ...
- 001_软件waf
一.优秀的软件waf开源软件 <1>openwaf介绍 http://www.oschina.net/p/openwaf http://git.oschina.net/miracleqi ...
- 001_docker-compose构建elk环境
由于打算给同事分享elk相关的东西,搭建配置elk环境太麻烦了,于是想到了docker.docker官方提供了docker-compose编排工具,elk集群一键就可以搞定,真是兴奋.好了下面咱们开始 ...
- 08 Go 1.8 Release Notes
Go 1.8 Release Notes Introduction to Go 1.8 Changes to the language Ports Known Issues Tools Assembl ...
- 用原生js实现ajax
// 通过createXHR()函数创建一个XHR对象 function createXHR() { if(window.XMLHttpRequest) { // IE7.Firefox.Opera. ...
- vs 加载 dll 缓慢
https://jingyan.baidu.com/article/642c9d34e25cc2644b46f74b.html http://www.it610.com/article/2611781 ...
- Servlet 3.0 新特性详解
转自:http://www.ibm.com/developerworks/cn/java/j-lo-servlet30/#major3 Servlet 是 Java EE 规范体系的重要组成部分,也是 ...
- ****timeago.js插件:jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例
前端 时间个性化 插件 jquery.timeago.js 关键词 : 时间格式化 刚刚 N分钟前 N小时前 N天前 N月前 N年前 MM-dd hh:mm 或者 yyyy-MM-dd 前端: & ...
- django中注册功能signup的测试例
这个是套路, 有了这些测试用例, 开发就会更有保障, 且每次重写,都好麻烦, 不好cp来得快~~:) from django.test import TestCase from django.urls ...
- 原 nc在centos7上的安装和简单使用
https://blog.csdn.net/qq_16414307/article/details/50291341 https://www.cnblogs.com/rocky-AGE-24/p/69 ...