Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素变成jQuery UI的button,大致这样做: <button id="btn">点我</button> $('#btn').button( icons: { primary: 'ui-icon-gear' } ); "他山之石,可以攻玉",…

本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.observable(data.name); this.category = ko.observable(data.category); }; 由于是从服务端返回json数据,待会服务端返回Products集合的时候,可以构建一个key为name和category的json格式. 而foreach需要绑…

本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcApplication3.Models { public class Product { public int Id { get; set; } public string Name { get; set; } public string Category { get; set; } public deci…

在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validationMessage属性可以自定义验证信息的显示位置. @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <style type="text/css">…

在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集合类型,key就是自定义验证规则的名称,value是一个json对象. @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <style type="text/c…

本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <style type="text/css"> .error { color: red; } </style> <input data-bind="…

通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成json格式,通过pre元素显示出来. <input data-bind="value: name"/><hr/> <select data-bind="options: categories, value: category" >&…

使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <input data-bind="value: name"/><hr/> <select data-bind="options: categories, value: category" ></select><hr/> @…

本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View Model添加扩展方法. □ 使用ko.computed(fn)计算成员 有时候,我们希望把View Model中的几个成员组合起来成为一个新成员,使用ko.computed(fn)可实现. 接着上一篇,为productViewModel这个json对象增加一个计算成员. <div data-bi…

在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性Html,它为我们呈现控件提供了捷径. 我们今天主要来讨论Html.DropDownList的用法,首先从Html.TextBox开始. Html.TextBox有一个重载方法形式如下: publicstaticstringTextBox(thisHtmlHelperhtmlHelper,string…