Fork me on GitHub

随笔分类 -  Knockout.js

摘要:visible, disable, css绑定 这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式。先简单的看一段代码: 是否是会员 你的用户名是: -1}"/> 尊贵的会员欢迎你访问! 这段代码几乎不需要解释,非常的简单易懂,就是控制input元素的可用性,根据其中的文本添加样式,和控制隐藏元素的显示。完整代码如下: Test 是否是会员 你的用户名是: -1}"/> 尊贵的会员欢迎你访... 阅读全文
posted @ 2013-07-31 22:28 Halower 阅读(1739) 评论(1) 推荐(1) 编辑
摘要:数组元素的新增/移除事件前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上。当然我们想在数组增加或移除元素时加上自定义逻辑就好比一个触发器的感觉,可以吗?foreach提供了afterAdd及beforeRemove两个额外的事件,允许在数组新增、移除元素时执行特定逻辑。在此继续沿用先前的用户列表呈现范例,加上两个效果:新增数据时,将最新加入的数据和表格进行着色修饰删除数据时,加上数据淡出特效而在ViewModel里我们加上两个函数: //添加对象后才触发,第一次forach并不会触发 self.... 阅读全文
posted @ 2013-07-26 18:41 Halower 阅读(4180) 评论(7) 推荐(10) 编辑
摘要:实时反映对象属性的变化在前一篇博客中我们使用了如下代码去新增user对象,即push方法:$("#btnAddUser").click(function () { vm.users.push(new UserViewModel( $("#u_id").val(), $("#u_name").val(), parseInt($("#u_score").val()))); });使用ko.computed去动态的计算user对象的s... 阅读全文
posted @ 2013-07-24 22:18 Halower 阅读(2198) 评论(4) 推荐(9) 编辑
摘要:以列表方式呈现数据 处理以数组形式储存的多条数据,要先认识foreach。在ViewModel定义一个JavaScript Array或是ko.observableArray() (observableArray在新增或剔除数组元素时,KO会立刻察觉反应到UI,普通Array则不会),然后在某个容器元素(例如: div, ul, tbody... )声明data-bind="foreach: arrayPropName",就可以指定KO将容器内的子元素模板(Template)就会对数组对象的数据自动循环遍历,例如: 移除 在上面的例子中,我们假设ViewModel有一个数组 阅读全文
posted @ 2013-07-24 00:42 Halower 阅读(4144) 评论(16) 推荐(11) 编辑
摘要:动态绑定下拉列表 在Value= Text: Value: 运行效果如下:范例二:Mvc结合knockout.js完成级联下拉菜单本例只是为了模拟,所以数据比较简陋,当然也可以从数据库中出数据来进行处理。@{ Layout = null;} Index 选择学生: @Html.DropDownList("Student", ViewBag.Students as SelectList, "请选择", new { onchange = "searchLover()... 阅读全文
posted @ 2013-07-21 22:00 Halower 阅读(5951) 评论(3) 推荐(7) 编辑
摘要:下拉菜单 排行: 运行效果:备注: 本文版权归大家共用,不归本人所有,所有知识都来自于官网支持,书本,国内外论坛,大牛分享等等......后续将学习knockout.js的常用功能。 阅读全文
posted @ 2013-07-15 00:20 Halower 阅读(3143) 评论(2) 推荐(0) 编辑
摘要:计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox、Select的onchange、onclick等互动细节,就能达到UI元素与数据天人合一的境界。这一系列的konckout学习笔记,将逐一探讨knockout.js在常见网页情境上的应用。 Knockout.js随手记(1)开篇已经示范过最简单的应用,为与加上data-bind宣告,透过ko.applyBindings()绑定到定义好的ViewModel上,当input改变输入内容,会立即反应在span。然而,有些场合数据需经.. 阅读全文
posted @ 2013-07-13 18:26 Halower 阅读(4408) 评论(5) 推荐(6) 编辑
摘要:新的开始,knockout.js1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.32.知道什么是Knockout?它是个JavaScript library,帮助创建丰富的显示和编辑器UI,通过干净的底层数据模型。你可以在任何时候动态更新UI的选择部分。3.知道knockoutjs的实现原理[MVVM模式]MVVM的优点MVVM已在微软WPF/Silverlight/WP7中广泛应用,和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点1. 低耦合。视图(View)可以独立于Model变化和修改, 阅读全文
posted @ 2013-07-12 20:32 Halower 阅读(9438) 评论(8) 推荐(7) 编辑

点击右上角即可分享
微信分享提示