selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素，用在使用options绑定的元素上。...这种方式是2-way绑定。 注：控制single-select下拉菜单选择项，你可以使用value绑定。...支持让用户选择任意JavaScript对象 在上面的例子里，用户可以选择数组里的字符串值，但是选择不限于字符串，如果你愿意你可以声明包含任意JavaScript对象的数组，查看options绑定如何显示...uniqueName绑定 uniqueName绑定确保所绑定的元素有一个非空的name属性。如果该元素没有name属性，那绑定会给它设置一个unique的字符串值作为name属性。...为配合Knockout UI使用，有些时候需要使用uniqueName绑定避免让jQuery Validation验证出错。
Html绑定 html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。...关于HTML encoding 因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。...如果你不确信是否安全（比如显示用户输入的内容），那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。...Css绑定 css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用，比如当数字变成负数时高亮显示。...（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）
event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。...submit绑定 submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。 ...当你使用submit绑定的时候， Knockout会阻止form表单默认的submit动作。换句话说，浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。...可以很好地解释这个，使用 submit绑定就是为了处理view model的自定义函数的，而不是再使用普通的HTML form表单。...总共有两个元素一个是录入框，另一个是submit提交按钮 在form上，你可以使用click绑定代替submit绑定。
enable绑定 enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input，select，和textarea上非常有用。...如果你的参数是observable的，那绑定会随着observable值的改变而自动更新enabled/disabled状态。如果不是，则只会设置一次并且以后不再更新。...= '555'"> Do something disable绑定 disable绑定使DOM元素只有在参数值为 true的时候才disabled。...disable绑定和enable绑定正好相反，详情请参考enable绑定
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。...（注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。）...text-decoration: someValue }; 正确： { textDecoration: someValue } 参考：style名称和对应的JavaScript 名称列表 attr绑定...attr 绑定提供了一种方式可以设置DOM元素的任何属性值。...使用绑定，当模型属性改变的时候，它会自动更新。
注：如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态，而不是value 值的绑定。...绑定下拉菜单drop-down list（例如SELECT） Knockout对下拉菜单drop-down list绑定有一个特殊的支持，那就是在读取和写入绑定的时候，这个值可以是任意JavaScript...具体例子，参考options绑定。 类似，如果你想创建一个multi-select list，参考selectedOptions绑定。...更新observable和non-observable属性值 如果你用value绑定将你的表单元素和你的observable属性关联起来，KO设置的2-way的双向绑定，任何一方改变都会更新另外一方的值...但是，如果你的元素绑定的是一个non-observable属性（例如是一个原始的字符串或者JavaScript表达式） ,KO会这样执行： 1.如果你绑定的non-observable属性是简单对象
前言 options绑定控制什么样的options在drop-down列表里（例如：）或者 multi-select 列表里 （例如：）显示。...此绑定不能用于之外的元素。关联的数据应是数组（或者是observable数组），会遍历显示数组里的所有的项。...对于multi-select列表，设置或者获取选择的多项需要使用selectedOptions绑定。...对于single-select列表，你也可以使用value绑定读取或者设置元素的selected项。...技术上看它是一个单独的绑定，有自己的文档，请参考： selectedOptions绑定。
前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。...例如，如果你的元素和父元素都绑定了click事件，那当你点击该元素的时候两个事件都会触发的。如果需要，你可以通过额外的绑定clickBubble来禁止冒泡。
前言 checked绑定是关联到checkable的form表单控件到view model上 - 例如checkbox（）或者radio button（<input...注：对text box，drop-down list和所有non-checkable的form表单控件，用value绑定来读取和写入是该元素的值，而不是checked绑定。
前言 text 绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。该绑定在显示或者上非常有用，但是你可以用在任何元素上。...简单绑定 Today's message is: <script type="text/javascript" src..."expensive" : "affordable"; }, viewModel); 添加一个UI页面元素进行绑定 The item is <span data-bind="text:...关于HTML encoding 因为该<em>绑定</em>是设置元素的innerText或textContent （而不是innerHTML），所以它是安全的，没有HTML或者脚本注入的风险。...如果你需要显示HTML内容，请参考html<em>绑定</em>. 关于IE 6的白空格whitespace IE6有个奇怪的问题，如果 span里有空格的话，它将自动变成一个空的span。
前言 让visible绑定到DOM元素上，使得该元素的hidden或visible取决于绑定的值。...简单的绑定 首先还是先定义一个ViewModel var AppViewModel = { shouldShowMessage: ko.observable(true) /...参数： 当参数设置为一个假值时（例如：布尔值false， 数字值0， 或者null， 或者undefined） ,该绑定将设置该元素的style.display值为none，让元素隐藏。...当参数设置为一个真值时（例如：布尔值true，或者非空non-null的对象或者数组） ,该绑定会删除该元素的style.display值，让元素可见。...ko.applyBindings( AppViewModel); 在ViewModel中添加了一个myValues的属性值 同时给myValues的数组添加了一个项 并且在页面UI中绑定了一个元素
前言 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定（像click，value等）。你可以你封装复杂的逻辑或行为，自定义很容易使用和重用的绑定。...例如，你可以在form表单里自定义像grid，tabset等这样的绑定。...注册你的绑定 添加子属性到ko.bindingHandlers来注册你的绑定： ko.bindingHandlers.yourBindName...例如，你可能想通过 visible绑定来控制一个元素的可见性，但是你想让该元素在隐藏或者显示的时候加入动画效果。...init回调 Knockout在DOM元素使用自定义绑定的时候会调用你的init函数。
1、Knockout.js是什么？...声明绑定-它通过简单浅显的方式将你的UI与数据源模型进行绑定，你可以使用任意嵌套的结构模版来组建一个复杂的动态界面。 良好的可扩展性-通过简单的几行代码就可以实现一个自定义行为作为新的声明进行绑定。...它仅仅只需要将你的数据转换成一个JavaScript数组，然后使用foreach将数据数组绑定到页面中的一个表格table或者一组div中。...例如：你可以声明绑定如下一个SPAN显示数据数量： There are items 就是这些！
前言 最近一段时间在网上经常看到关于Knockout.js文章，于是自己就到官网看了下，不过是英文的，自己果断搞不来，借用google翻译了一下。...WPF的数据绑定与Presentation Model相结合是非常好的做法,使得开发人员可以将View和逻辑分离出来,但这种数据绑定技术非常简单实用，也是WPF所特有的，所以我们又称之为Model-View-ViewModel...而不管是Silverlight/WPF或JavaScript，MVVM程式库的目标即在节省前述自行开发的工夫，只需在显示/输入元素上注明其对应的ViewModel属性，之后全部交给knockout.js...开始使用Knockout.js 如果你建立像asp.net mvc 4.0这样的Web应用程序，那么你可以不用任何操作即可以使用Knockout.js,如果你建立其他的项目或许需要引用该类库。...3.通过data-bind="value:myValue"将myValue属性绑定到的value值。
必须view model的一些属性是observable的，你可以使用KO绑定他们到你的UI元素上，当这些observable值改变的时候，这些UI元素就会自动更新。...var viewModel = { serverTime: ko.observable(), numUsers: ko.observable() }; 然后绑定...由于view model属性是observable的，在他们变化的时候，KO会自动更新绑定的HTML元素。 接下来，从服务器获取最新的数据。...viewModel.serverTime(data.Date); viewModel.numUsers(data.Count); 最终页面就通过Ko自动更新绑定了数据
如果你需要探测和响应一个集合对象的变化，你应该用observableArray 。
本文不讲解knockout.js和webAPI ，不了解的同学可以百度一下。下一篇博文将采用webAPI和Redis缓存作为服务端重写该项目。 ...我们采用MVC和knockout.js实现一个简单的学生信息管理，实现学生信息的增删改查功能。通过knockout.js来进行数据的绑定，你会发现代码变得很优雅。...knockout.js在Script文件夹中，只用关注带黄色底纹的文件，其他没有用。...把数据绑定到页面中。...把数据绑定到页面中 @{ ViewBag.Title = "eidt"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section Header
myViewModel = { personName:'aehyok', personAge:25 }; 2.为ViewModel创建一个声明式绑定的简单的...ko.dependentObservable(function () { return this.firstName() + " " + this.lastName(); }, myViewModel); 并且绑定到...你可以像普通情况一样将这个view model绑定到DOM元素上，如下： First name: ...0 : value); }, owner:viewModel }); 然后绑定到textbox上面 Enter bid price: <input data-bind...this.acceptedNumericValue(value); } }, owner:viewModel }); 进行绑定
一、Knockout.js简介 1、Knockout.js和MVVM 如今，各种前端框架应接不暇，令人眼花缭乱，有时不得不感叹作为程序猿也真是苦逼，总有学不完的技术，何时是尽头，除非你转化！...Knockout.js是一个基于MVVM模式的轻量级的前端框架，有多轻？根据官网上面显示的最新版本v3.4.0，仅22kb。...Knockout.js官网：http://knockoutjs.com Knockout.js开源地址：https://github.com/knockout/knockout MVVM模式：这是一种创建用户界面的设计模式...2、最简单的实例 一般来说，如果你从零开始使用Knockout.js，你至少需要做以下四部 2.1、去官网下载knockout.js文件，然后引用到view页面里面。... 注意：knockout.js并不需要jquery的支持，如果你的项目需要用到
企业级Web应用的一个特点是以“数据处理”为主，所以“面向绑定”的Knockout.js 是一个不错的选择。...现在我们通过Knockout.js来进行数据绑定，你会发现我们代码会变得很优雅。 这个简单的Demo应用用于模拟“联系人管理”。当页面加载的时候，所有的联系人列表被列出来。...三、通过jQuery进行Ajax调用，利用Knockout.js进行数据绑定 我们通过ASP.NET MVC来构建Web应用，默认的HomeController定义如下，默认的Index操作仅仅是将默认的...我们采用jQuery进行Ajax调用ApiController进行联系人的获取、添加、修改和删除，数据和命令（添加、修改和删除）的绑定是通过Knockout.js来完成的。 1: <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
