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


Posted in Javascript onOctober 11, 2016

textInput绑定目的

textInput绑定主要用于<input>或者<textarea>元素。他提供了DOM和viewmodel的双向更新。不同于value绑定,textinput绑定是实时更新的。

例如:

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

源码:

<p>Login name: <input data-bind="textInput: userName" /></p>
<p>Password: <input type="password" data-bind="textInput: userPassword" /></p>

ViewModel:

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
<script>
ko.applyBindings({
userName: ko.observable(""), // Initially blank
userPassword: ko.observable("abc") // Prepopulate
});
</script>

备注1:textInput绑定 VS value绑定

虽然value结合也可以进行双向文本框和视图模型性能的结合,但是博主更喜欢textInput,因为他是实时更新的。value绑定与textInput绑定的主要的区别在于:

即时更新

value默认情况下,只有当用户将焦点从文本框移开后才会更新您的模型。textInput每次击键或其他文本输入时立刻更新模型。

浏览器的事件处理

不同的浏览器有着文本输入机制,如剪切,拖动,或接受自动完成建议的事件在不同的浏览器中机制是不一致。value绑定,有额外的选项,如valueUpdate: afterkeydown获得对特定事件的更新,但是有可能不兼容所有的浏览器。

textInput结合是专门用来处理各种浏览器的不同机制,即使在应对不同的文字输入机制也能保持一致和直接更新模型。

不要尝试使用value和textInput在相同的元素上进行绑定。

hasFocus绑定目的

hasFocus绑定是视图模型属性与DOM元素的焦点状态绑定。它是一个双向绑定,所以:

如果您的视图模型属性设置为true或者false,相关的元素将成为聚焦的或未聚焦。
如果用户手动对焦或unfocuses相关元件,所述视图模型属性将被设置为true或false相应。
如果您正在构建中,编辑元素动态显示复杂的形式,你想控制,用户应该开始打字,或插入符的响应位置,这是非常有用的。

示例1

这个例子中当文本框当前具有焦点时则显示消息,并可以使用一个按钮通过编程方式触发焦点。

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

源码:

<input data-bind="hasFocus: isSelected">
<button data-bind="click: setIsSelected">Focus programmatically</button>
<span data-bind="visible: isSelected">The textbox has focus</span> 
<script>
var viewModel = {
isSelected: ko.observable(false),
setIsSelected: function() { this.isSelected(true) }
};
ko.applyBindings(viewModel,document.getElementById("eq2"));
</script>

示例2

因为hasFocus绑定是双向绑定,这可以使切换的“编辑”模式更加便捷。

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

源码:

<p>
Name: 
<b data-bind="visible: !editing(), text: name, click: edit"> </b>
<input data-bind="visible: editing, value: name, hasFocus: editing" />
</p>
<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>
<script>
function PersonViewModel(name) {
// Data
this.name = ko.observable(name);
this.editing = ko.observable(false);
// Behaviors
this.edit = function() { this.editing(true) }
}
ko.applyBindings(new PersonViewModel("Bert Bertington"),document.getElementById("eq3"));
</script>

checked绑定目的

checked绑定主要用于复选框(<input type='checkbox'>)或单选按钮(<input type='radio'>) 并与视图模型属性进行绑定。

当用户更改了表单控件,这将更新您的视图模型属性的值。同样,当您更新您的视图模型的值,也将直接反映到表单控件上。

注意:对于文本框,下拉列表,以及所有以非可勾选表单控件,需要使用value绑定或者textInput绑定读写元素的值,而不是checked绑定。

示例1:复选框绑定

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

源码:

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true) // Initially checked
};
// ... then later ...
viewModel.wantsSpam(false); // The checkbox becomes unchecked
</script>

示例2:多复选框附带数组绑定

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

源码:

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavors of spam:
<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div>
<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div>
<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div>
</div>
<script 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
</script>

示例3:单选按钮

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

源码:

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavor of spam:
<div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
<div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
<div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>
<script 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
</script>

参数

主要技术参数

KO设置元素的选中状态,以配合您的参数值。任何以前选中的状态将被覆盖。您的参数被解释的方式取决于你绑定元素是什么类型:

对于复选框,当参数值true时KO将设置为元素为选中状态,当它为false则为未选中状态。如果你给定的不是一个布尔值,KO会松散地解释。这意味着,非零数字和非null对象和非空字符串都将被解释为true,而零,null,undefined,和空字符串将被解释为false。

当用户选中或取消选中该复选框,将KO你的模型属性设置为true或false。

如果你的参数解析为一个被给予array数组。在这种情况下,KO将设置检查DOM中value属性是否与数组值匹配,如果值匹配则被选中,如果不匹配则不勾选。

当用户选中或取消选中该复选框,将KO更改对应视图模型属性的值。就像示例2一样。

对于单选按钮,KO将检查视图模型的值是否等于单选按钮DOM节点的value属性或检查视图模型属性值是否等于checkedValue参数指定的值。就像示例3一样。

当选择了用户改变其单选按钮,KO会设置模型属性值为选定的单选按钮的值。像示例3中,点击value="cherry"的单选按钮后将设置viewModel.spamFlavor为"cherry"。

如果你的参数是监控属性类型,每当值改变绑定将更新元素的选中状态。如果该参数是非监控属性,它只会在首次运行时设置元素的选中状态,以后再不会更新。

其他参数

checkedValue

checkedValue参数定义了使用值与checked绑定结合,而不是元素的value属性。如果你想要的值是一个字符串(如整数或对象)以外的东西,或者你想动态设置的值,这非常有用。

例如下边的例子:

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

源码:

<!-- ko foreach: items -->
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
<span data-bind="text: itemName"></span>
<!-- /ko -->
<script type="text/javascript">
var viewModel = {
items: ko.observableArray([
{ itemName: 'Choice 1' },
{ itemName: 'Choice 2' }
]),
chosenItems: ko.observableArray()
};
</script>

如果你的checkedValue参数是一个监控属性,当值的变化和元素是否被选中,绑定将更新checked模型属性。对于复选框,它会从数组删除旧值并添加新的价值。对于单选按钮,它只会更新模型值。

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

Javascript 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
实例讲解React 组件
Jul 07 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 #Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 #Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 #Javascript
javascript 动态样式添加的简单实现
Oct 11 #Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 #Javascript
javascript 动态脚本添加的简单方法
Oct 11 #Javascript
js HTML5上传示例代码完整版
Oct 10 #Javascript
You might like
php实现将上传word文件转为html的方法
2015/06/03 PHP
php 基础函数
2017/02/10 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
纯javascript版日历控件
2016/11/24 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
python中使用序列的方法
2015/08/03 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
计算机专业自荐信
2013/10/14 职场文书
俄语专业毕业生推荐信
2013/10/28 职场文书
银行出纳岗位职责
2013/11/25 职场文书
如何写你的创业计划书
2014/01/07 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
三下乡活动方案
2014/01/31 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
六一节目主持词
2014/04/01 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
Redis入门教程详解
2021/08/30 Redis