Knockout学习之表单绑定器(下)
“hasFocus”绑定
hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点。
比如下面的例子将会演示如何使用通过代码设置焦点,并且当关联的标签获得焦点后显示一段文本:
<div>
<input type="text" data-bind="hasfocus: focusState" />
<button type="button" data-bind="click:setFocus" >set focus</button>
<span data-bind="visible:focusState" >the text box has focus</span>
</div> <script type="text/javascript"> var appViewModel = function () {
var self = this;
this.focusState = ko.observable(false);
this.setFocus = function () {
self.focusState(true);
};
} ko.applyBindings(new appViewModel());
</script>
“checked”绑定
“checked”绑定器用来关联checkable表单控件,比如复选框和单选框。
比如下面的列子可以判断用户是否勾选了这个复选框:
<div>
<input type="checkbox" data-bind="checked: isChecked" />
</div>
<div>
<button type="button" data-bind="click:setFocus">勾选</button>
</div> <script type="text/javascript"> var appViewModel = function () {
var self = this;
this.isChecked = ko.observable(false);
this.setFocus = function () {
self.isChecked(true);
};
} ko.applyBindings(new appViewModel());
</script>
再复杂些就是可以将用户勾选的值组成数组,比如下面的例子:
<div>
<input type="checkbox" value="a" data-bind="checked: CheckArray" />
<input type="checkbox" value="b" data-bind="checked:CheckArray" />
<input type="checkbox" value="c" data-bind="checked:CheckArray" />
</div>
<div>
<button type="button" data-bind="click:showChecked">show checked</button>
</div> <script type="text/javascript"> var appViewModel = function () {
var self = this;
this.CheckArray = ko.observableArray(['a','b']);
this.showChecked = function () {
alert(self.CheckArray().toString());
};
} ko.applyBindings(new appViewModel());
</script>
当然不仅仅只有复选,在单选的情况下只会将选择的元素的value值更新到视图模型中去,比如下面的例子所示:
<div>
<input type="radio" name="1" value="a" data-bind="checked: CheckEle" />
<input type="radio" name="1" value="b" data-bind="checked: CheckEle" />
<input type="radio" name="1" value="c" data-bind="checked: CheckEle" />
</div>
<div>
<button type="button" data-bind="click:showChecked">show checked</button>
</div> <script type="text/javascript"> var appViewModel = function () {
var self = this;
this.CheckEle = ko.observable('a');
this.showChecked = function () {
alert(self.CheckEle());
};
} ko.applyBindings(new appViewModel());
</script>
如果你不想用value那个值,可以加上checkedValue属性,这样更新到视图模型中的值就是checkedValue指定的值。比如下面这样:
<div>
<input type="radio" name="1" value="a" data-bind="checkedValue:'s', checked: CheckEle" />
<input type="radio" name="1" value="b" data-bind="checkedValue: 'd', checked: CheckEle" />
<input type="radio" name="1" value="c" data-bind="checkedValue: 'e', checked: CheckEle" />
</div>
<div>
<button type="button" data-bind="click:showChecked">show checked</button>
</div>
“options”绑定
“options”绑定器控制在下拉列表中显示的项,比如<select>单选或者<select size=’6’ >多选,但是该绑定器不能在除了<select>标签使用。
指定关联的值必须是一个数组或者监控数组,ko会将这些数组中的项作为<select>的option显示。
比如下面的例子,会将数组中的值全部显示,同时我们还可以在此之后增加新的值到数组中,ko一样会更新:
<div>
<select data-bind="options:dropOptions" ></select>
</div>
<div>
<input type="text" data-bind="value:newOption" />
<button type="button" data-bind="click: addNewOptions">add new item</button>
</div> <script type="text/javascript"> var appViewModel = function () {
var self = this;
this.dropOptions = ko.observableArray(['a', 'b', 'c', 'd']);
this.newOption = ko.observable();
this.addNewOptions = function () {
self.dropOptions.push(self.newOption());
self.newOption('');
}
} ko.applyBindings(new appViewModel());
</script>
当然对于多选也一样可以应付:
<div>
<select size="3" multiple="multiple" data-bind="options:dropOptions" ></select>
</div>
当然一定会有人问如何获取选择的项,这里我们可以用value绑定器,比如下面的代码将第一个例子改写,能够显示选择的值:
<div>
<select data-bind="options:dropOptions,value:selectedOption" ></select>
</div>
<div>
<input type="text" data-bind="value:newOption" />
<button type="button" data-bind="click: addNewOptions">add new item</button>
<button type="button" data-bind="click: showSelectOption">show selected value</button>
</div> <script type="text/javascript"> var appViewModel = function () {
var self = this;
this.dropOptions = ko.observableArray(['a', 'b', 'c', 'd']);
this.newOption = ko.observable();
this.selectedOption = ko.observable();
this.addNewOptions = function () {
self.dropOptions.push(self.newOption());
self.newOption('');
},
this.showSelectOption = function () {
alert(self.selectedOption());
}
} ko.applyBindings(new appViewModel());
</script>
如果是多选我们可以将value关联的属性改成监控数组,那么就可以解决这个问题了,但是上面仅仅只是简单的数组,实际的开发过程中可能是一个对象组成的数组,而我们也要将其显示到下拉中,当然options绑定一样可以办到,比如下面的例子:
<div>
<select data-bind="options:dropOptions,value:selectedOption,optionsCaption:'choose...',optionsText:'text',optionsValue:'value'" ></select>
</div>
<div>
<button type="button" data-bind="click: showSelectOption">show selected value</button>
</div> <script type="text/javascript">
var ObjectArray = function (text, value) {
this.text = text;
this.value = value;
} var appViewModel = function () {
var self = this;
this.dropOptions = ko.observableArray([new ObjectArray('a', 1), new ObjectArray('b', 2), new ObjectArray('c', 1)]);
this.selectedOption = ko.observable();
this.showSelectOption = function () {
alert(self.selectedOption());
}
} ko.applyBindings(new appViewModel());
</script>
这里我们通过optionsCaption是用来显示提示的,optionsText是用来指定用于作为下拉显示的属性名称,这里我们指定的是text,而optionsValue则是指定用于作为value的属性名称,我们指定的是value,那么当我们选择一项之后,点击显示,则显示的是value的值而不是text的值,当然optionsText也可以传给它一个函数,那么ko会将数组中的当前项作为第一个参数传递给这个函数,当然这个函数也要返回用于显示的文字。
还有一些其他参数如下:
optionsIncludeDestroyed:是否显示数组中已经会设置为删除标记的项,默认是不显示的。
optionsAfterRender:当一个项显示之后调用该函数,可以同来执行一些自定义的方法。
selectedOptions:用于多选的情况,用来关联选择的项。关联到视图模型中的属性类型需要为数组,并且在通过push和pop操作该数组的同时,下拉中选择的项也会跟着变动。
valueAllowUnset:当你指定的value不存在于下拉项中的时候,下拉将显示空白,如果未设置该属性为true则会将value关联的属性设置为undefined,同时下拉会显示optionCaption指定的字符串。
“uniqueName”绑定
这个绑定器很简单,就是用来给name属性生成一个标识符。
Knockout学习之表单绑定器(下)的更多相关文章
- Knockout学习之表单绑定器(上)
表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...
- Element Form表单实践(下)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- vue基础-动态样式&表单绑定&vue响应式原理
动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- bootstrap基础学习【表单含按钮】(二)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框
jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
- Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Angular5+ 自定义表单验证器
Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个cont ...
- Spirng MVC +Velocity 表单绑定命令对象
通常,表单中的数据在提交之后可以通过Spring MVC的@RequestParam注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...
随机推荐
- Binary Search Tree 以及一道 LeetCode 题目
一道LeetCode题目 今天刷一道LeetCode的题目,要求是这样的: Given a binary search tree and the lowest and highest boundari ...
- 我的Java学习推荐书目
一直有这么个想法,列一下我个人认为在学习和使用Java过程中可以推荐一读的书籍,给初学者或者想深入的朋友一些建议,帮助成长.推荐的的都是我自己读过,也会推荐一些朋友读过并且口碑不错的书籍. 一.基础类 ...
- iOS測试——置换測试: Mock, Stub 和其它
文章地址:http://ryantang.me/blog/2014/08/21/test-doubles/
- freemarker怎么把数据显示到页面中?
第一步 创建一个User.java文件 来两个变量 public class User { private String userName; private ...
- 再议FastReport.NET(转)
之前说起过FastReport.NET这款报表工具的使用,但当时主要是从程序的角度,示例了在B/S架构下的相关使用,但报表终归还是要划到设计的范畴里来,毕竟能够将报表的内容展示在客户的眼前,这才是报表 ...
- Graph 卷积神经网络:概述、样例及最新进展
http://www.52ml.net/20031.html [新智元导读]Graph Convolutional Network(GCN)是直接作用于图的卷积神经网络,GCN 允许对结构化数据进行端 ...
- sql-获取指定年份指定月份的天数
declare @年月 varchar(6) set @年月= '201803' --查询2015年2月有多少天 select day(dateadd(month,1,@年月+ '01 ')-1)
- 前端开发必备 40款优秀CSS代码编写工具推荐
摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...
- 转: xshell远程连接自动断开的问题解决办法
转:http://blog.csdn.net/haijiaoqihao20160106/article/details/50623431 2.客户端的配置 Keep Alive修改.我的xshell的 ...
- Linux中盘符的两种挂载方法
相信接触过Linux系统的人对于mount命令都不陌生,今天是农历2017年的最后一个工作日,趁着时光还在,就说一下两种不同的挂载方法吧. 课前小知识: 命令格式:mount [-t vfstype] ...