KnockoutJS 3.X API 第四章之表单value绑定

Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。

重要特性:

优雅的依赖追踪 - 不管任何时候你的数据模型更新,都会自动更新相应的内容。

声明式绑定 - 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。

轻易可扩展 - 几行代码就可以实现自定义行为作为新的声明式绑定。

额外的好处:

纯JavaScript类库 – 兼容任何服务器端和客户端技术

可添加到Web程序最上部 – 不需要大的架构改变

简洁的 - Gzip之前大约25kb

兼容任何主流浏览器 - (IE 6+、Firefox 2+、Chrome、Safari、其它)

采用行为驱动开发 - 意味着在新的浏览器和平台上可以很容易通过验证。

目的

value绑定主要用于DOM元素给视图模型赋值用的。通常用于<input><select><textarea>等元素。

value绑定与text绑定的区别在于,value绑定中当用户编辑表单控件相关值的时候,值会自动更新视图模型的相关属性值,当视图模型的相关属性值被更新后,表单中相关的value绑定也会随之变化。

value绑定就像DOM和ViewModel的一个双向通道。而text绑定只是ViewModel到DOM的单向通道。

例如:

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>
<script type="text/javascript">
var viewModel = {
userName: ko.observable(""), // Initially blank
userPassword: ko.observable("abc"), // Prepopulate
};
</script>

一些细节

主要技术细节:

KO将会使用初始值设置value绑定的元素。当有新的值的时候,初始值将被覆盖
如果value绑定的是监控属性,那么之后的属性值更新就会被体现在DOM的value绑定上,如果不是监控属性,则只有第一次运行会更新DOM上的value绑定的值,之后就不会再变了。

如果你的value绑定不是数值型或字符型数据(例如一个对象或数组),那显示的文本内容将等同于yourParameter.toString()。最好还是绑定值型或字符型数据。

当用户编辑表单控件修改基于value绑定的元素值并移出焦点后,KO就会自动更新对应的视图模型的属性值,你也可以通过使用valueUpdate事件来控制。

其他技术细节:

valueUpdate,KO定义了一系列的change事件,最常用包括如下事件:

"input"-<input>或<textarea>元素的变化更新您的视图模型时的值。

"keyup" - 当用户释放某个键更新您的视图模型

"keypress"-当用户输入一个值更新您的视图模型。不像keyup,这个会反复更新

"afterkeydown"-当用户开始输入一个字符尽快更新您的视图模型。这通过捕获浏览器的keydown事件,并异步处理该事件。这

个事件在一些移动客户端可能不会起什么作用。

valueAllowUnset,适用于<select>的value绑定,其他元素不起作用,具体请参考之后的备注2.

备注1:实时更新

如果你想要实时更新<input>或者<textarea>到你的视图模型,可以使用textInput绑定。具体的textInput细节将在之后的章节提到。

备注2:下拉列表<select>的绑定

KO在下拉列表绑定中,需要使用value绑定和options绑定(options绑定将在以后的章节中提到)。

使用valueAllowUnset与<select>元素

Select a country:

源码:

<p>
Select a country:
<select data-bind="options: countries,
optionsCaption: 'Choose one...',
value: selectedCountry,
valueAllowUnset: true"></select>
</p>
<script type="text/javascript">
var viewModel = {
countries: ['Japan', 'Bolivia', 'New Zealand'],
selectedCountry: ko.observable('Latvia')
};
</script>

有很多时候,我们希望下拉列表中包含一个空白的或者没有包含在数据集合中的元素,比如choose one…,那么就可以使用valueAllowUnset:true来带到目的。如上述例子一样。

selectedCountry将保留Latvia,并将下拉列表中空白匹配给它。

备注3:绑定监控属性和非监控属性

如果你使用value绑定的是一个监控属性,KO是能够建立一个双向绑定。

但是如果value绑定是一个非监控属性,则KO会进行以下处理:

如果引用一个简单的属性,也就是说,它只是在你的视图模型一个普通的属性,表单元素编辑时KO将设置表单元素的初始状态属性值。

例如:

First value:
hello
First value:hello
Second value:
hello, again
Second value: hello, again
Third value:
true

源码:

<p>First value: <input data-bind="value: firstValue"></p>
<p>First value:<span data-bind="text:firstValue"></span></p>
<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondValue"></p>
<p>Second value: <span data-bind="text: secondValue"></span></p>
<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondValue.length > 8"></p>
<script type="text/javascript">
var viewModel = {
firstValue: ko.observable("hello"), // Observable
secondValue: "hello, again" // Not observable
};
ko.applybindings(viewModel,document.getElementById("eq2"));
</script>

以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之表单value绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库.任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护. submit绑定目的 submit绑定即为提交绑定,通常用于form元素.这种绑定方式会打断默认的提交至服务器的操作.转而提交到你设定好的提交绑定回调函数中.如果要打破这个默认规则,只需要在回调函数中返回true即可. 例如: <form

  • KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定

    textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,textinput绑定是实时更新的. 例如: 源码: <p>Login name: <input data-bind="textInput: userName" /></p> <p>Password: <input type="pa

  • KnockoutJS 3.X API 第四章之数据控制流component绑定

    一个例子 UI源码: <h4>First instance, without parameters</h4> <div data-bind='component: "message-editor"'></div> <h4>Second instance, passing parameters</h4> <div data-bind='component: { name: "message-edito

  • KnockoutJS 3.X API 第四章之click绑定

    目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数.最常见用于button.input.a元素. 例如: You've clicked 0timesClick me 源码: <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: incrementClickCounter&q

  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

    Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.Knockout.js简介 1.Knockout.js和MVVM 如今,各种前端框架应接不暇,令人眼花缭乱,有时不得

  • KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定

    if绑定目的 if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值(也可以是非bool值,当非空字符串时则为真),if绑定的作用与visible绑定的作用类似.可控制DOM的显示与隐藏,不一样的地方是,if绑定是物理删除或添加DOM元素. 示例1 该例展示IF绑定的动态删除添加DOM: Display message UI源码: <label><input type="checkbox" data-bind=&qu

  • KnockoutJS 3.X API 第四章之数据控制流with绑定

    with绑定的目的 使用with绑定的格式为data-bind="with:attribute",使用with绑定会将其后所跟的属性看作一个新的上下文进行绑定.with绑定内部的所有元素将受到该上下文的约束. 当然,with绑定也可配合if或foreach绑定一起使用. 示例1 <h1 data-bind="text: city"> </h1> <p data-bind="with: coords"> Lati

  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能[一],介绍了下knockout.js的一些基础用法.接下来通过本文继续给大家介绍.如果你也打算用ko去做项目,且看看吧! Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己

  • KnockoutJS 3.X API 第四章之数据控制流foreach绑定

    foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素,不影响任何其他的DOM元素. 当然,也可以配合其他控制流一起适用,例如if和with. 示例1:遍历监控属性数组 本例适用foreach绑定,在一个table标签中循环显示监控属性数组的内容 <table> <thead> <tr&g

  • KnockoutJS 3.X API 第四章之事件event绑定

    目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me 源码: <div> <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div> <div data-bind="visibl

随机推荐