& 开源中国(OSChina.NET) |
开源中国社区(OSChina.net)是工信部
指定的官方社区WeX5 UI优势技术解密：采用单页模式，资源无需重复加载_起步软件-爱微帮
&& &&& WeX5 UI优势技术解密：采用单页模式…
WeX5是跨端移动开发框架，BeX5是基于WeX5的企业快速开发平台，它们都采用前后端分离的开发模式，和Web传统的前端页面开发（例如extjs）比较类似，和jsp存在差异。WeX5、BeX5和很多当前的前端页面开发最大的差异即优势在于：WeX5、BeX5采用了单页模式，实现资源不重复加载：由于采用单页模式，X5引入了RequireJS，实现资源异步按需加载，且只加载一次作为快速开发工具，X5提供了可视化界面设计器作为快速开发工具，对界面常用功能进行封装，实现界面全面组件化这样的UI开发与传统UI开发有哪些不同呢？下面就从页面部分、页面中的数据、js部分、发布等几个方面具体说明。1、页面部分1.1、页面加载事件传统——window.onload事件X5——model组件的onload事件1.2、页面关闭事件传统——window.onunload事件X5——model组件的onunload事件1.3、获取url的参数传统JS——只有一种参数，就是url中?后面的参数，从location.href中截取JSP——使用&% String 参数值 = request.getParameter(“参数名”);%&获取X5—— 有三种参数，url中可以显示出来的有两种参数，一种是?后面的参数，另一种是#!后面的JSON格式的参数，还有一种是url中不显示的复杂参数。前两种显示在url上，为了实现页面分享，后一种实现传递复杂参数。?后面的参数——使用 this.getContext().getRequestParameter(“参数名”);方法获取#!后面的JSON格式的参数——使用this.params.参数名 的方式获取url中不显示的——使用this.params.data.参数名 的方式获取1.4、引用js传统——在html中加入&script src=”/system/lib/justep.js”&&/script&X5——使用RequireJS，实现异步按需加载传统——&link rel=”stylesheet” type=”text/css” href=”/OA/config/pub.css”&在w文件中，在&window&标签下加入&script&标签，也可以引用js文件，但是不推荐使用。当多个w文件引用同一个js文件时，和多页模式一样，会导致多次加载，而使用require的方式加载js文件。只会加载一次，因此推荐使用。参考1.5、引用cssX5——使用RequireJS，实现按需加载。 require(“css!$UI/OA/config/pub”).load();引用css和引用js一样，推荐使用require方式，避免多次加载，代码中的load方法，是保证了css文件的加载顺序。参考1.6、使用xid而非id传统——使用id属性X5——采用单页模式，需要进行页面隔离，即为了使得在打开多个页面时，元素的id不重复，X5增加了xid属性，替代id属性，因此要将id属性改成xid属性，通过id属性获得element的方法，改为通过xid属性获得elements的方法例如：1、在w文件中，元素不定义id属性，而定义xid属性&div id=”canvas” width=”300″ height=”200″//&&div xid=”canvas” width=”300″ height=”200″//&2、在js文件中获取div时，不使用id获取元素，而是使用xid获取元素var div= document.getElementById(‘div’);var div= this.getElementByXid(‘div’);1.7、获取到input输入框的输入内容传统——$(“#input1″).val();X5——p(“input1″).val();如果input组件设置了bind-ref属性，建议使用data组件的val方法获取input框中的数据，例如：input组件的bind-ref属性设置为accountData.ref(‘fType’)推荐写这样的代码获取input中的值，p(“accountData”).val(“fType”);1.8、页面跳转传统——服务端重定向、重设location.hrefX5——使用shell提供的showPage方法打开页面，使用closePage方法关闭页面；也可以使用弹出窗口组件提供的open方法打开页面，使用window组件的close操作关闭页面；还可以使用a跳转页面，相当于调用showPage方法1.9、图片路径 &img src=？& 传统——直接写绝对路径或相对路径X5——在w文件中设置img的src属性时写绝对路径，在css文件中写绝对路径，在js文件中可以写相对路径，但是一定要使用require.toUrl方法，将相对路径转换成绝对路径。绝对路径——$UI/takeout/img/1.jpg相对路径——./img/1.jpg，相对路径是相对w文件而言1.10、信息提示 传统——提供了alert方法和confirm方法X5——不仅可以使用alert方法和confirm方法，还提供了justep.Util.hint方法和justep.Util.confirm方法，好用又美观。更提供了MessageDialog组件，自定义信息提示框1.11、上传文件传统——&input type=”file”&X5——提供了附件组件，实现上传、下载、查看文件。在手机上还可以实现拍照上传。1.12、详细页面的制作传统——table divX5——传统的写法都支持，还提供了响应式布局（row组件），表格布局（excellayout、celllayout组件）、绝对布局（absoluteLayout组件）1.13、界面控制传统——设置html标签disabled属性X5——支持传统的方式，还支持使用表达式控制例如：1.14、路由传统——多页应用，每页可以单独访问X5——X5是单页应用，除了首页以外的其它页面都是首页的一部分，那么页面如何单独访问呢，在url中使用#！例如http://192.168.1.20:8080/x5/UI2/acc/index.w#!($UI/acc/list.w)http://192.168.1.20:8080/x5/UI2/acc/index.w#!($UI/acc/classsetting.w)支持短地址http://192.168.1.20:8080/x5/UI2/acc/index.w#!listhttp://192.168.1.20:8080/x5/UI2/acc/index.w#!classSetting1.15、背景图片传统——写在body上X5——写在window组件上，切换到源码页，给window组件增加style属性1.16、事件传统——on开头，例如onclickX5——分为on开头的事件和bind开头的事件，on开头的事件是X5组件提供的回调型事件，bind开头的事件是标准dom事件，就是传统的on开头的事件html文件中的写法&input type=”text” value=”测试” onclick=”alert(this.value);”&事件中的this是inputw文件中的写法&input type=”text” value=”测试” bind-click=”input1Click”&onclick属性改为bind-click属性，在bind-click属性中不能直接写代码，必须写方法名，在js文件中定义这个方法1.17、调用action传统——在js中发送ajax请求，在form提交中调用servlet&form action=”/SendMessageServlet” method=post & WeX5——在js中发送ajax请求 BeX5——在js中发送ajax请求和在js中调用业务动作1.18、在前端获得session的值传统JS——发送请求获取JSP——&%String sesStr = (String)session.getAttribute(“aaa”);%&WeX5——发送ajax请求获取BeX5——定义action，获取session信息，在js中调用action，获得action返回值在action中获取session的代码如下1.19、在前端访问全局变量传统JS——发送请求获取JSP—— &%Integer count=(Integer)application.getAttribute(“count”);%&WeX5——发送ajax请求获取BeX5——有两种方法1、在BIZ定义全局静态变量，定义action访问该变量，在js中调用action，获得action返回值2、在BIZ定义全局静态变量，在获取系统参数动作（getSysParamsAction）中，插入需要在前端获得的全局变量的值获取系统参数动作的java代码如下在js中获取系统参数的代码如下1this.getContext().getSystemParameter('aaa');2、页面中的数据传统——开发中自己设计X5——W文件提供，存储客户端数据，数据感知组件（展现组件）感知这些数据，形成数据感知体系，使得页面更加智能。数据组件提供的相关能力数据结构——编辑列，设置列名及类型操作数据——查询、新增、修改、删除、保存、查找、分页加载、遍历、设置静态数据数据规则——只读、计算公式、必填、约束数据类型——行列数据、树形数据数据绑定——设置是否显示、是否可用、应用样式等3、js部分X5使用了RequireJS，用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范（Asynchronous Module Definition）。RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。3.1、全局变量传统——定义在所有方法外面X5——定义在Model的构造方法中3.2、自定义js方法传统——定义为全局方法X5——定义为Model的实例方法3.3、自定义公共js文件传统——X5——参考/UI2/system/lib/justep.js、/UI2/demo/baas/baas.js定义——justep.js文件内容节选引用justep.js3.4、获取element传统——使用id属性：document.getElementByIdX5——使用xid属性：this.getElementByXidvar div= document.getElementById(‘div’);var div= this.getElementByXid(‘div’);3.5、获取jQuery对象传统——使用id属性：$(‘#id’)X5——使用xid属性：$(this.getElementByXid(‘组件的xid’))；还提供了获取X5组件对象的方法——p(‘组件的xid’);通过X5组件对象获得jQuery对象——p(‘组件的xid’).$domN3.6、创建节点，删除节点传统——使用jQuery的append方法创建节点，使用remove方法删除节点X5——使用justep.Bind.addNode和justep.Bind.addNodes方法创建节点，使用justep.Bind.removeNode方法删除节点，还提供了创建、删除X5组件的方法创建html节点删除html节点创建X5组件删除X5组件3.7、增加事件，删除事件传统——使用jQuery的on方法增加事件，使用off方法删除事件X5——使用on方法增加事件，使用off方法删除事件例如：在w文件中放input给html标签增加事件删除html标签的事件例如：在w文件中放X5的input组件给X5组件增加事件，X5组件的事件包括两种，一种是on开头的事件，一种是bind开头的事件，它们的增加、删除方法不同。其中bind开头的事件是html标签原生事件，只要浏览器支持，即使组件的事件页里面没有列出，也是可以增加的，例如input组件的oninput事件。删除X5组件的事件4、发布4.1、设置首页标题传统——在首页的html文件中&head&中增加&title&X5——打开/UI2/system/components/justep/window/main.html文件，在&head&中增加&title&4.2、更换图标传统——在网站根目录下放favicon.ico文件X5——和传统做法一样，X5已经在版本的apache-tomcat\webapps\ROOT目录下放了一个图标，替换这个文件即可4.3、部署到Web应用服务器传统——开发出来的就是Web应用，可以直接部署到Web应用服务器上WeX5——开发出来的是UI资源。有两种部署方式，一种是使用UIServer，UIServer作为Web应用部署到Web应用服务器上，通过UIServer访问开发出来的UI资源；另一种是不使用UIServer，将编译好的UI资源作为Web应用部署到Web应用服务器上BeX5——开发出来的是模型资源，不是Web应用。在Web应用服务器上需要部署版本中runtime目录下的几个Web应用，通过这几个Web应用访问开发出来的模型资源WeX5开发框架， 完全开源免费，一次开发、跨端发布、响应式设计、大小屏自适应、“秒开”级的极致体验！扫二维码（或长按二维码，选择“识别图中二维码”），即可关注WeX5公众号（ID: 起步软件）
点击展开全文
微信扫描右侧二维码关注后
悄悄告诉你
更多同类文章
还可知道有多少人阅读过此篇文章哦
WeX5跨端移动开发框架：100%开源，完全免费，移动App、web app和服务号/企业号开发利器，一次开发，跨平台运行。BeX5企业快速开发平台：支持工作流、报表、组织权限、表单、文档、企业门户。
您的【关注和订阅】是作者不断前行的动力
本站文章来自网友的提交收录，如需删除可发送邮件到 bang＠ 或联系QQ ，
(C)2014&&版权所有&&&|&&&
京ICP备号-2&&&&京公网安备34【图文】X5V3.0页面框架核心讲解之数据绑定_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
X5V3.0页面框架核心讲解之数据绑定
||暂无简介
仙桃职业学院教授|
总评分4.2|
浏览量385960
大小：111.52KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢11183人阅读
javascript（22）
1 visible 绑定
visible绑定到DOM元素上，使得该元素的hidden或visible状态取决于绑定的值。
data-bind=&visible: shouldShowMessage&
You will see this message only when &shouldShowMessage& holds a true value.
type=&text/javascript&
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
viewModel.shouldShowMessage(false); // ... now it's hidden
viewModel.shouldShowMessage(true); // ... now it's visible again
当参数设置为一个假值时(例如：布尔值false， 数字值0， 或者null， 或者undefined) ,该绑定将设置该元素的style.display值为none，让元素隐藏。它的优先级高于你在CSS里定义的任何display样式。
当参数设置为一个真值时(例如：布尔值true，或者非空non-null的对象或者数组) ,该绑定会删除该元素的style.display值，让元素可见。然后你在CSS里自定义的display样式将会自动生效。
如果参数是监控属性observable的，那元素的visible状态将根据参数值的变化而变化，如果不是，那元素的visible状态将只设置一次并且以后不在更新。
注：使用函数或者表达式来控制元素的可见性
你也可以使用JavaScript函数或者表达式作为参数。这样的话，函数或者表达式的结果将决定是否显示/隐藏这个元素。例如：
data-bind=&visible: myValues().length & 0&
You will see this message only when 'myValues' has at least one member.
type=&text/javascript&
var viewModel = {
myValues: ko.observableArray([]) // Initially empty, so message hidden
viewModel.myValues.push(&some value&); // Now visible
除KO核心类库外，无依赖。
2 text 绑定
text 绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。该绑定在显示或者上非常有用，但是你可以用在任何元素上。
Today's message is:
data-bind=&text: myMessage&
type=&text/javascript&
var viewModel = {
myMessage: ko.observable() // Initially blank
viewModel.myMessage(&Hello, world!&); // Text appears
KO将参数值会设置在元素的innerText (IE)或textContent(Firefox和其它相似浏览器)属性上。原来的文本将会被覆盖。
如果参数是监控属性observable的，那元素的text文本将根据参数值的变化而更新，如果不是，那元素的text文本将只设置一次并且以后不在更新。
如果你传的是不是数字或者字符串(例如一个对象或者数组)，那显示的文本将是yourParameter.toString()的等价内容。
注1：使用函数或者表达式来决定text值
如果你想让你的text更可控，那选择是创建一个依赖监控属性(dependent observable)，然后在它的执行函数里编码，决定应该显示什么样的text文本。
The item is
data-bind=&text: priceRating& today.
type=&text/javascript&
var viewModel = {
price: ko.observable(24.95)
viewModel.priceRating = ko.dependentObservable(function () {
returnthis.price() 50?&expensive& : &affordable&;
}, viewModel);
现在，text文本将在“expensive”和“affordable”之间替换，取决于价格怎么改变。
然而，如果有类似需求的话其实没有必要再声明一个依赖监控属性(dependent observable)， 你只需要按照如下代码写JavaScript表达式就可以了：
The item is
data-bind=&text: price() & 50 ? 'expensive' : 'affordable'& today.
结果是一样的，但我们不需要再声明依赖监控属性(dependent observable)。
注2：关于HTML encoding
因为该绑定是设置元素的innerText或textContent (而不是innerHTML)，所以它是安全的，没有HTML或者脚本注入的风险。例如：如果你编写如下代码：
viewModel.myMessage(&Hello, world!&);
… 它不会显示斜体字，而是原样输出标签。如果你需要显示HTML内容，请参考html绑定.
注3：关于IE 6的白空格whitespace
IE6有个奇怪的问题，如果 span里有空格的话，它将自动变成一个空的span。如果你想编写如下的代码的话，那Knockout将不起任何作用：
data-bind=&text: userName& to our web site.
… IE6 将不会显示span中间的那个空格，你可以通过下面这样的代码避免这个问题：
data-bind=&text: userName&& to our web site.
IE6以后版本和其它浏览器都没有这个问题
除KO核心类库外，无依赖。
3 html 绑定
html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。
data-bind=&html: details&
type=&text/javascript&
var viewModel = {
details: ko.observable() // Initially blank
viewModel.details(&For further details, view the report
href='report.html'here.&);
// HTML content appears
KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。
如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。
如果你传的是不是数字或者字符串(例如一个对象或者数组)，那显示的文本将是yourParameter.toString()的等价内容。
注：关于HTML encoding
因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。如果你不确信是否安全(比如显示用户输入的内容)，那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。
除KO核心类库外，无依赖。
4 css 绑定
css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用，比如当数字变成负数时高亮显示。(注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。)
data-bind=&css: { profitWarning: currentProfit() & 0 }&
Profit Information
type=&text/javascript&
var viewModel = {
currentProfit: ko.observable(150000)
// Positive value, so initially we don't apply the &profitWarning& class
viewModel.currentProfit(-50);
// Causes the &profitWarning& class to be applied
效果就是当currentProfit 小于0的时候，添加profitWarning CSS class到元素上，如果大于0则删除这个CSS class。
该参数是一个JavaScript对象，属性是你的CSS class名称，值是比较用的true或false，用来决定是否应该使用这个CSS class。
你可以一次设置多个CSS class。例如，如果你的view model有一个叫isServre的属性，
data-bind=&css: { profitWarning: currentProfit() & 0, majorHighlight: isSevere }&
非布尔值会被解析成布尔值。例如， 0和null被解析成false，21和非null对象被解析成true。
如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的CSS class。如果不是，那CSS class将会只添加或者删除一次并且以后不在更新。
你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。
注：应用的CSS class的名字不是合法的JavaScript变量命名
如果你想使用my-class class，你不能写成这样：
data-bind=&css: { my-class: someValue }&...
… 因为my-class不是一个合法的命名。解决方案是：在my-class两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的)。例如,
除KO核心类库外，无依赖。
5 style 绑定
style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。(注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。)
data-bind=&style: { color: currentProfit() & 0 ? 'red' : 'black' }&
Profit Information
type=&text/javascript&
var viewModel = {
currentProfit: ko.observable(150000) // Positive value, so initially black
viewModel.currentProfit(-50); // Causes the DIV's contents to go red
当currentProfit 小于0的时候div的style.color是红色，大于的话是黑色。
该参数是一个JavaScript对象，属性是你的style的名称，值是该style需要应用的值。
你可以一次设置多个style值。例如，如果你的view model有一个叫isServre的属性，
data-bind=&style: { color: currentProfit() & 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }&...
如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的style值。如果不是，那style值将会只应用一次并且以后不在更新。
你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除style值。
注：应用的style的名字不是合法的JavaScript变量命名
如果你需要应用font-weight或者text-decoration，你不能直接使用，而是要使用style对应的JavaScript名称。
错误： { font-weight: someValue }; 正确：
{ fontWeight: someValue }
错误： { text-decoration: someValue }; 正确：
{ textDecoration: someValue }
参考：style名称和对应的JavaScript 名称列表。
除KO核心类库外，无依赖。
6 attr 绑定
attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性，连接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。
data-bind=&attr: { href: url, title: details }&
type=&text/javascript&
var viewModel = {
url: ko.observable(&year-end.html&),
details: ko.observable(&Report including final year-end statistics&)
呈现结果是该连接的href属性被设置为year-end.html， title属性被设置为Report including final year-end statistics。
该参数是一个JavaScript对象，属性是你的attribute名称，值是该attribute需要应用的值。
如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是，那attribute值将会只应用一次并且以后不在更新。
注：应用的属性名字不是合法的JavaScript变量命名
如果你要用的属性名称是data-something的话，你不能这样写：
data-bind=&attr: { data-something: someValue }&...
… 因为data-something 不是一个合法的命名。解决方案是：在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的)。例如,
data-bind=&attr: { ‘data-something’: someValue }&...
除KO核心类库外，无依赖
7 click 绑定
click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。
You've clicked
data-bind=&text: numberOfClicks& times
data-bind=&click: incrementClickCounter&Click me
type=&text/javascript&
var viewModel = {
numberOfClicks: ko.observable(0),
incrementClickCounter: function () {
var previousCount =this.numberOfClicks();
this.numberOfClicks(previousCount +1);
每次点击按钮的时候，都会调用incrementClickCounter()函数，然后更新自动更新点击次数。
Click点击事件时所执行的函数。
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如：
someObject.someFunction。
View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写incrementClickCounter 就可以了，而无需写成：
viewModel.incrementClickCounter(尽管是合法的)。
注1：传参数给你的click 句柄
最简单的办法是传一个function包装的匿名函数：
data-bind=&click: function() { viewModel.myFunction('param1', 'param2') }&
这样，KO就会调用这个匿名函数，里面会执行viewModel.myFunction()，并且传进了'param1' 和'param2'参数。
注2：访问事件源对象
有些情况，你可能需要使用事件源对象，Knockout会将这个对象传递到你函数的第一个参数：
data-bind=&click: myFunction&
type=&text/javascript&
var viewModel = {
myFunction: function (event) {
if (event.shiftKey) {
//do something different when user has shift key down
//do normal action
如果你需要的话，可以使用匿名函数的第一个参数传进去，然后在里面调用：
data-bind=&click: function(event) { viewModel.myFunction(event, 'param1', 'param2') }&
这样，KO就会将事件源对象传递给你的函数并且使用了。
注3: 允许执行默认事件
默认情况下，Knockout会阻止冒泡，防止默认的事件继续执行。例如，如果你点击一个a连接，在执行完自定义事件时它不会连接到href地址。这特别有用是因为你的自定义事件主要就是操作你的view model，而不是连接到另外一个页面。
当然，如果你想让默认的事件继续执行，你可以在你click的自定义函数里返回true。
注4：控制this句柄
初学者可以忽略这小节，因为大部分都用不着，高级用户可以参考如下内容：
KO在调用你定义的函数时，会将view model传给this对象(也就是ko.applyBindings使用的view model)。主要是方便你在调用你在view model里定义的方法的时候可以很容易再调用view model里定义的其它属性。例如： this.someOtherViewModelProperty。
如果你想引用其它对象，我们有两种方式：
◆ 你可以和注1里那样使用匿名函数，因为它支持任意JavaScript 对象。
◆ 你也可以直接引用任何函数对象。你可以使用bind使callback函数设置this为任何你选择的对象。例如：
data-bind=&click: someObject.someFunction.bind(someObject)&
如果你是C#或Java开发人员，你可以疑惑为什么我们还要用bind函数到一个对象想，特别是像调用someObject.someFunction。 原因是在JavaScript里，函数自己不是类的一部分，他们在单独存在的对象，有可能多个对象都引用同样的someFunction函数，所以当这个函数被调用的时候它不知道谁调用的(设置this给谁)。在你bind之前运行时是不会知道的。KO默认情况下设置this对象是view model，但你可以用bind语法重定义它。
在注1里使用匿名函数的时候没有具体的要求，因为JavaScript代码 someObject.someFunction()就意味着调用someFunction，然后设置this到 someObject对象上。
注5：防止事件冒泡
默认情况下，Knockout允许click事件继续在更高一层的事件句柄上冒泡执行。例如，如果你的元素和父元素都绑定了click事件，那当你点击该元素的时候两个事件都会触发的。如果需要，你可以通过额外的绑定clickBubble来禁止冒泡。例如：
data-bind=&click: myDivHandler&
data-bind=&click: myButtonHandler, clickBubble: false&
默认情况下，myButtonHandler会先执行，然后会冒泡执行myDivHandler。但一旦你设置了clickBubble为false的时候，冒泡事件会被禁止。
除KO核心类库外，无依赖。
8 event 绑定
event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。
data-bind=&event: { mouseover: enableDetails, mouseout: disableDetails }&
Mouse over me
data-bind=&visible: detailsEnabled&
type=&text/javascript&
var viewModel = {
detailsEnabled: ko.observable(false),
enableDetails: function () {
this.detailsEnabled(true);
disableDetails: function () {
this.detailsEnabled(false);
每次鼠标在第一个元素上移入移出的时候都会调用view model上的方法来toggle detailsEnabled的值，而第二个元素会根据detailsEnabled的值自动显示或者隐藏。
你需要传入的是一个JavaScript对象，他的属性名是事件名称，值是你所需要执行的函数。
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： event: { mouseover: someObject.someFunction }。
View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写event: { mouseover: enableDetails } 就可以了，而无需写成：
event: { mouseover: viewModel.enableDetails }
(尽管是合法的)。
9 submit 绑定
submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。
当你使用submit绑定的时候， Knockout会阻止form表单默认的submit动作。换句话说，浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个，使用submit绑定就是为了处理view model的自定义函数的，而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作，你可以在你的submit句柄里返回true。
data-bind=&submit: doSomething&
... form contents go here ...
type=&submit&Submit
type=&text/javascript&
var viewModel = {
doSomething: function (formElement) {
// ... now do something
这个例子里，KO将把整个form表单元素作为参数传递到你的submit绑定函数里。 你可以忽略不管，但是有些例子里是否有用，参考：ko.postJson工具。
为什么不在submit按钮上使用click绑定?
在form上，你可以使用click绑定代替submit绑定。不过submit可以handle其它的submit行为，比如在输入框里输入回车的时候可以提交表单。
你绑定到submit事件上的函数
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如：
submit: someObject.someFunction。
View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写submit: doSomething就可以了，而无需写成：
submit: viewModel. doSomething(尽管是合法的)。
关于如果传递更多的参数给submit绑定函数，或者当调用非view model里的函数的时如何控制this，请参考click绑定。所有click绑定相关的notes也都适用于submit绑定。
除KO核心类库外，无依赖。
10 enable 绑定
enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input，select，和textarea上非常有用。
type='checkbox' data-bind=&checked: hasCellphone&
I have a cellphone
Your cellphone number:
type='text' data-bind=&value: cellphoneNumber, enable: hasCellphone&
type=&text/javascript&
var viewModel = {
hasCellphone: ko.observable(false),
cellphoneNumber: &&
这个例子里，“Your cellphone number”后的text box 初始情况下是禁用的，只有当用户点击标签 “I have a cellphone”的时候才可用。
声明DOM元素是否可用enabled。
非布尔值会被解析成布尔值。例如0和null被解析成false，21和非null对象被解析给true。
如果你的参数是observable的，那绑定会随着observable值的改变而自动更新enabled/disabled状态。如果不是，则只会设置一次并且以后不再更新。
注：任意使用JavaScript表达式
不紧紧限制于变量 – 你可以使用任何JavaScript表达式来控制元素是否可用。例如,
data-bind=&enabled: parseAreaCode(viewModel.cellphoneNumber()) != '555'&
Do something
除KO核心类库外，无依赖。
11 disable 绑定
disable绑定使DOM元素只有在参数值为 true的时候才disabled。在form表单元素input，select，和textarea上非常有用。
disable绑定和enable绑定正好相反，详情请参考enable绑定。
12 value 绑定
value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件&input&，&select&和&textarea&上。
当用户编辑表单控件的时候， view model对应的属性值会自动更新。同样，当你更新view model属性的时候，相对应的元素值在页面上也会自动更新。
注：如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态，而不是value 值的绑定。
Login name:
data-bind=&value: userName& Password:
type=&password& data-bind=&value: userPassword&
type=&text/javascript&
var viewModel = {
userName: ko.observable(&&),
// Initially blank
userPassword: ko.observable(&abc&), // Prepopulate
KO设置此参数为元素的value值。之前的值将被覆盖。
如果参数是监控属性observable的，那元素的value值将根据参数值的变化而更新，如果不是，那元素的value值将只设置一次并且以后不在更新。
如果你提供的参数不是一个数字或者字符串(而是对象或者数组)的话，那显示的value值就是yourParameter.toString() 的内容(通常没用，所以最好都设置为数字或者字符串)。
不管什么时候，只要你更新了元素的值，那 KO都会将view model对应的属性值自动更新。默认情况下当用户离开焦点(例如onchange事件)的时候，KO才更新这个值，但是你可以通过第2个参数valueUpdate来特别指定改变值的时机。
valueUpdate
如果你使用valueUpdate参数，那就是意味着KO将使用自定义的事件而不是默认的离开焦点事件。下面是一些最常用的选项：
“change”(默认值) - 当失去焦点的时候更新view model的值，或者是
“keyup” – 当用户敲完一个字符以后立即更新view model。
“keypress” – 当用户正在敲一个字符但没有释放键盘的时候就立即更新view model。不像 keyup，这个更新和keydown是一样的。
“afterkeydown” – 当用户开始输入字符的时候就更新view model。主要是捕获浏览器的keydown事件或异步handle事件。
上述这些选项，如果你想让你的view model进行实时更新，使用“afterkeydown”是最好的选择。
Your value:
data-bind=&value: someValue, valueUpdate: 'afterkeydown'& You have typed:
data-bind=&text: someValue&
type=&text/javascript&
var viewModel = {
someValue: ko.observable(&edit me&)
注1：绑定下拉菜单drop-down list(例如SELECT)
Knockout对下拉菜单drop-down list绑定有一个特殊的支持，那就是在读取和写入绑定的时候，这个值可以是任意JavaScript对象，而不必非得是字符串。在你让你用户选择一组model对象的时候非常有用。具体例子，参考options绑定。
类似，如果你想创建一个multi-select list，参考selectedOptions绑定。
注2：更新observable和non-observable属性值
如果你用value绑定将你的表单元素和你的observable属性关联起来，KO设置的2-way的双向绑定，任何一方改变都会更新另外一方的值。
但是，如果你的元素绑定的是一个non-observable属性(例如是一个原始的字符串或者JavaScript表达式) ,KO会这样执行：
◆ 如果你绑定的non-observable属性是简单对象，例如一个常见的属性值，KO会设置这个值为form表单元素的初始值，如果你改变form表单元素的值，KO会将值重新写回到view mode的这个属性。但当这个属性自己改变的时候，元素却不会再变化了(因为不是observable的)，所以它仅仅是1-way绑定。
◆ 如果你绑定的non-observable属性是复杂对象，例如复杂的JavaScript 表达式或者子属性，KO也会设置这个值为form表单元素的初始值，但是改变form表单元素的值的时候，KO不会再写会view model属性，这种情况叫one-time-only value setter，不是真正的绑定。
First value:
data-bind=&value: firstValue&
Second value:
data-bind=&value: secondValue&
Third value:
data-bind=&value: secondValue.length&
type=&text/javascript&
var viewModel = {
firstValue: ko.observable(&hello&), // Observable
secondValue: &hello, again&// Not observable
ko.applyBindings(viewModel);
除KO核心类库外，无依赖。
13 checked 绑定
checked绑定是关联到checkable的form表单控件到view model上 - 例如checkbox（&input type='checkbox'&）或者radio button（&input type='radio'&） 。当用户check关联的form表单控件的时候，view model对应的值也会自动更新，相反，如果view model的值改变了，那控件元素的check/uncheck状态也会跟着改变。
注：对text box，drop-down list和所有non-checkable的form表单控件，用value绑定来读取和写入是该元素的值，而不是checked绑定。
Send me spam:
type=&checkbox& data-bind=&checked: wantsSpam&
type=&text/javascript&
var viewModel = {
wantsSpam: ko.observable(true) // Initially checked
// ... then later ...
viewModel.wantsSpam(false); // The checkbox becomes unchecked
Checkbox关联到数组
Send me spam:
type=&checkbox& data-bind=&checked: wantsSpam&
data-bind=&visible: wantsSpam&
Preferred flavors of spam:
type=&checkbox& value=&cherry& data-bind=&checked: spamFlavors& Cherry
type=&checkbox& value=&almond& data-bind=&checked: spamFlavors& Almond
type=&checkbox& value=&msg& data-bind=&checked: spamFlavors& Monosodium Glutamate
type=&text/javascript&
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavors: ko.observableArray([&cherry&, &almond&]) // Initially checks the Cherry and Almond checkboxes
// ... then later ...
viewModel.spamFlavors.push(&msg&); // Now additionally checks the Monosodium Glutamate checkbox
添加radio button
Send me spam:
type=&checkbox& data-bind=&checked: wantsSpam&
data-bind=&visible: wantsSpam&
Preferred flavor of spam:
type=&radio& name=&flavorGroup& value=&cherry& data-bind=&checked: spamFlavor& Cherry
type=&radio& name=&flavorGroup& value=&almond& data-bind=&checked: spamFlavor& Almond
type=&radio& name=&flavorGroup& value=&msg& data-bind=&checked: spamFlavor& Monosodium Glutamate
type=&text/javascript&
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavor: ko.observable(&almond&) // Initially selects only the Almond radio button
// ... then later ...
viewModel.spamFlavor(&msg&); // Now only Monosodium Glutamate is checked
KO会设置元素的checked状态匹配到你的参数上，之前的值将被覆盖。对参数的解析取决于你元素的类型：
对于checkbox，当参数为true的时候，KO会设置元素的状态为checked，反正设置为unchecked。如果你传的参数不是布尔值，那KO将会解析成布尔值。也就是说非0值和非null对象，非空字符串将被解析成true，其它值都被解析成false。
当用户check或者uncheck这个checkbox的时候，KO会将view model的属性值相应地设置为true或者false。
一个特殊情况是参数是一个数组，如果元素的值存在于数组，KO就会将元素设置为checked，如果数组里不存在，就设置为unchecked。如果用户对checkbox进行check或uncheck，KO就会将元素的值添加数组或者从数组里删除。
对于radio buttons，KO只有当参数值等于radio button value属性值的时候才设置元素为checked状态。所以参数应是字符串。在上面的例子里只有当view model 的spamFlavor 属性等于“almond”的时候，该radio button才会设置为checked。
当用户将一个radio button选择上的时候 is selected，KO会将该元素的value属性值更新到view model属性里。上面的例子，当点击value= “cherry”的选项上， viewModel.spamFlavor的值将被设置为“cherry”。
当然，最有用的是设置一组radio button元素对应到一个单个的view model 属性。确保一次只能选择一个radio button需要将他们的name属性名都设置成一样的值（例如上个例子的flavorGroup值）。这样的话，一次就只能选择一个了。
如果参数是监控属性observable的，那元素的checked状态将根据参数值的变化而更新，如果不是，那元素的value值将只设置一次并且以后不在更新。
除KO核心类库外，无依赖。
14 options 绑定
options绑定控制什么样的options在drop-down列表里（例如：&select&）或者 multi-select 列表里 （例如：&select size='6'&）显示。此绑定不能用于&select&之外的元素。关联的数据应是数组（或者是observable数组），&select&会遍历显示数组里的所有的项。
注：对于multi-select列表，设置或者获取选择的多项需要使用selectedOptions绑定。对于single-select列表，你也可以使用value绑定读取或者设置元素的selected项。
例1：Drop-down list
Destination country:
data-bind=&options: availableCountries&
type=&text/javascript&
var viewModel = {
availableCountries: ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options
// ... then later ...
viewModel.availableCountries.push('China'); // Adds another option
例2：Multi-select list
Choose some countries you'd like to visit:
data-bind=&options: availableCountries& size=&5& multiple=&true&
type=&text/javascript&
var viewModel = {
availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])
例3：Drop-down list展示的任意JavaScript对象，不仅仅是字符串
Your country:
data-bind=&options: availableCountries,
optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'&
data-bind=&visible: selectedCountry&
You have chosen a country with population
data-bind=&text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'&.
type=&text/javascript&
// Constructor for an object with two properties
var country =function (name, population) {
this.countryName = name;
this.countryPopulation = population;
var viewModel = {
availableCountries: ko.observableArray([
new country(&UK&, ),
new country(&USA&, ),
new country(&Sweden&, )
selectedCountry: ko.observable() // Nothing selected by default
例4：Drop-down list展示的任意JavaScript对象，显示text是function的返回值
data-bind=&options: availableCountries,
optionsText: function(item) {
return item.countryName + ' (pop: ' + item.countryPopulation + ')'
value: selectedCountry,
optionsCaption: 'Choose...'&
注意例3和例4在optionsText值定义上的不同。
该参数是一个数组（或者observable数组）。对每个item，KO都会将它作为一个&option& 添加到&select&里，之前的options都将被删除。
如果参数是一个string数组，那你不需要再声明任何其它参数。&select&元素会将每个string显示为一个option。不过，如果你让用户选择的是一个JavaScript对象数组（不仅仅是string），那就需要设置optionsText和optionsValue这两个参数了。
如果参数是监控属性observable的，那元素的options项将根据参数值的变化而更新，如果不是，那元素的value值将只设置一次并且以后不在更新。
optionsCaption
有时候，默认情况下不想选择任何option项。但是single-select drop-down列表由于每次都要默认选择以项目，怎么避免这个问题呢？常用的方案是加一个“请选择的”或者“Select an item”的提示语，或者其它类似的，然后让这个项作为默认选项。
我们使用optionsCaption参数就能很容易实现，它的值是字符串型，作为默认项显示。例如：
&select data-bind='options: myOptions, optionsCaption: &Select an item...&, value: myChosenValue'&&/select&
KO会在所有选项上加上这一个项，并且设置value值为undefined。所以，如果myChosenValue被设置为undefined（默认是observable的），那么上述的第一个项就会被选中。
optionsText
上面的例3展示的绑定JavaScript对象到option上 – 不仅仅是字符串。这时候你需要设置这个对象的那个属性作为drop-down列表或multi-select列表的text来显示。例如，例3中使用的是设置额外的参数optionsText将对象的属性名countryName作为显示的文本。
如果不想仅仅显示对象的属性值作为每个item项的text值，那你可以设置optionsText 为JavaScript 函数，然后再函数里通过自己的逻辑返回相应的值（该函数参数为item项本身）。例4展示的就是返回item的2个属性值合并的结果。
optionsValue
和optionsText类似, 你也可以通过额外参数optionsValue来声明对象的那个属性值作为该&option&的value值。
经典场景：如在更新options的时候想保留原来的已经选择的项。例如，当你重复多次调用Ajax获取car列表的时候，你要确保已经选择的某个car一直都是被选择上，那你就需要设置optionsValue为“carId”或者其它的unique标示符，否则的话KO找不知道之前选择的car是新options里的哪一项。
selectedOptions
对于multi-select列表，你可以用selectedOptions读取和设置多个选择项。技术上看它是一个单独的绑定，有自己的文档，请参考： selectedOptions绑定。
注：已经被选择的项会再options改变的时候保留
当使用options绑定&select&元素的时候，如果options改变，KO将尽可能第保留之前已经被选择的项不变（除非是你事先手工删除一个或多个已经选择的项）。这是因为options 绑定尝试依赖value值的绑定（single-select列表）和selectedOptions绑定（multi-select列表）。
除KO核心类库外，无依赖。
15 selectedOptions 绑定
selectedOptions绑定用于控制multi-select列表已经被选择的元素，用在使用options绑定的&select&元素上。
当用户在multi-select列表选择或反选一个项的时候，会将view model的数组进行相应的添加或者删除。同样，如果view model上的这个数组是observable数组的话，你添加或者删除任何item（通过push或者splice）的时候，相应的UI界面里的option项也会被选择上或者反选。这种方式是2-way绑定。
注：控制single-select下拉菜单选择项，你可以使用value绑定。
Choose some countries you'd like to visit:
data-bind=&options: availableCountries, selectedOptions: chosenCountries& size=&5& multiple=&true&
type=&text/javascript&
var viewModel = {
availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
chosenCountries: ko.observableArray(['Germany']) // Initially, only Germany is selected
// ... then later ...
viewModel.chosenCountries.push('France'); // Now France is selected too
该参数是数组（或observable数组）。KO设置元素的已选项为和数组里match的项，之前的已选择项将被覆盖。
如果参数是依赖监控属性observable数组，那元素的已选择项selected options项将根据参数值的变化（通过push，pop，或其它observable数组方法）而更新，如果不是，那元素的已选择项selected options将只设置一次并且以后不在更新。
不管该参数是不是observable数组，用户在multi-select列表里选择或者反选的时候，KO都会探测到，并且更新数组里的对象以达到同步的结果。这样你就可以获取options已选项。
注：支持让用户选择任意JavaScript对象
在上面的例子里，用户可以选择数组里的字符串值，但是选择不限于字符串，如果你愿意你可以声明包含任意JavaScript对象的数组，查看options绑定如何显示JavaScript对象到列表里。
这种场景，你可以用selectedOptions来读取或设置这些对象本身，而不是页面上显示的option表示形式，这样做在大部分情况下都非常清晰。view model就可以探测到你从数组对象里选择的项了，而不必关注每个项和页面上展示的option项是如何map的。
除KO核心类库外，无依赖。
16 uniqueName 绑定
uniqueName绑定确保所绑定的元素有一个非空的name属性。如果该元素没有name属性，那绑定会给它设置一个unique的字符串值作为name属性。你不会经常用到它，只有在某些特殊的场景下才用到，例如：
◆ 在使用KO的时候，一些技术可能依赖于某些元素的name属性，尽快他们没有什么意义。例如，jQuery Validation验证当前只验证有name属性的元素。为配合Knockout UI使用，有些时候需要使用uniqueName绑定避免让jQuery Validation验证出错。
◆ IE 6下，如果radio button没有name属性是不允许被checked了。大部分时候都没问题，因为大部分时候radio button元素都会有name属性的作为一组互相的group。不过，如果你没声明，KO内部会在这些元素上使用uniqueName那么以确保他们可以被checked。
data-bind=&value: someModelProperty, uniqueName: true&
就像上面的例子一样，传入true（或者可以转成true的值）以启用uniqueName绑定。
除KO核心类库外，无依赖。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：609392次
积分：5127
积分：5127
排名：第3531名
原创：15篇
转载：170篇
评论：49条
(1)(4)(1)(1)(3)(3)(25)(56)(49)(2)(4)(5)(4)(2)(1)(3)(2)(3)(6)(1)(1)(4)(4)}