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 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
JavaScript实现多个物体同时运动
Mar 12 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解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python3获取当前目录的实现方法
2019/07/29 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
汽车维修专业自荐书
2014/05/26 职场文书
爱护公共设施的标语
2014/06/24 职场文书
单位委托书格式范本
2014/09/29 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
捐款仪式主持词
2015/07/04 职场文书
员工考勤管理制度
2015/08/06 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS