随笔分类 -  Knockout.js

Knockout学习之前言
摘要：Knockout官网Knockout第三方表单验证插件 阅读全文
posted @ 2014-11-26 17:20 TiestoRay 阅读(164) 评论(0) 推荐(0)
Knockout学习之与服务器的数据交互
摘要：到目前为止，已经对MVVM模式如何帮自己整洁的管理针对动态UI的客户端代码，以及Knockout的可监听、绑定、依赖的工作方式有了很好的理解。在绝大部分的Web应用中，你需要从服务器获取数据，再将修改后数据返回。因为Knockout是一个纯客户端库，它能灵活的与各种服务器端技术(ASP.NET,Rails,PHP...)和任何架构模式，数据库合作。只要服务器端能收发JSON格式数据(so easy)，我们就可以使用这种技术。例子情景google的Tasks应该很多人都用过吧。我们也来尝试一个。View Code <!DOCTYPE HTML><html><head 阅读全文
posted @ 2013-01-02 12:37 TiestoRay 阅读(649) 评论(0) 推荐(0)
Knockout学习之创建自定义绑定
摘要：创建自定义绑定在Knockout对MVVM的解释中，绑定是连接View和ViewModel的中介。他们(绑定)可以执行双向更新： ①绑定会监听ViewModel(可以理解为数据)的变化，并对应的更新View的DOM。 ②绑定会捕获DOM的事件并相应的更新ViewModel的属性(数据)。Knockout 有一套灵活且全面的内置绑定属性(如text,click,foreach)。但是它还不仅仅如此--你只通过几行代码就可以创建自定义绑定(属性)OK，现在我们可以试试造两个自定义的绑定了。首先你将看到了一个没什么亮点但很功能齐全的调查页面。这是通过前两篇的知识完成的一个简单Demo。<!DO 阅读全文
posted @ 2012-12-21 12:37 TiestoRay 阅读(681) 评论(0) 推荐(0)
Knockout学习之Single Page Application
摘要：这篇通过一个带导航栏的邮件应用来学习单页应用1.添加一个ul标签，通过foreach绑定上数据集合2.在ul中添加li标签，因为ul上绑定的数据是数组，所以在li上绑定方式要用data-bind="text:$data"3.既然是导航，就应该可选择，即点击之后样式要变化，并且有特定时间。先通过改变class的方式处理样式变化。class的属性名比较奇怪，居然是css。data-bind="css:{selectedClass: (判断语句)}"点击时，获取数据并替换绑定的数据，这样与之相关的View就会更新。注：table绑定chosenFolderDa 阅读全文
posted @ 2012-12-19 07:59 TiestoRay 阅读(688) 评论(0) 推荐(0)
Knockout学习之Collections
摘要：①数据集的绑定在表的tbody上添加foreach即可实现对集合的迭代。ViewModel对象之间的相对关系类似于文件夹，可以嵌套，且存在“相对路径”.例如在tbody上用foreach绑定person后，该table中可直接绑定person下的属性而不需要加前缀。但是如果要绑定“根目录”下的属性则要添加前缀 $root.<!DOCTYPE HTML><html><head> <title>对数据集合的绑定1</title> <script src="http://knockoutjs.com/js/jquery-1. 阅读全文
posted @ 2012-12-13 19:17 TiestoRay 阅读(266) 评论(0) 推荐(0)
Knockout学习之Hello World
摘要：目前Knockout.js的教程和视频也有不少，但好多都是1.x版本的，而官方的更新也是很积极。所以我直接选择通过官方的小教程来学习。正好也可以亲身体验一下MVVM。①将数据绑定到DOM<!DOCTYPE HTML><html><head> <script src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2. 阅读全文
posted @ 2012-12-13 19:10 TiestoRay 阅读(520) 评论(0) 推荐(1)