下拉菜单
<select>也是网页设计重要的一环，knockout.js(以下简称KO)也有不错的支持。针对<select>，在data-bind除了用value可对应下拉菜单的选取结果，其选项也可以由ViewModel中取得，甚至动态改变。
以下是<select>常用的data-bind参数:
-
options :
指向数组或ko.observableArray()，KO会将数组元素转换为下拉选项。如果是ko.observableArray()，当动态增加或移除阵列元素时，下拉选项也会马上跟着增减。 -
optionsText, optionsValue :
用来产生下拉选项的数组元素可以是具有多个属性的JavaScript对象，通过optionText, optionValue设定属性名称字符串，我们可以指定用哪个属性当成<option>的文字内容，哪个属性当成value 。 -
value :
指向ViewModel的特定属性，属性一般以ko.observable()声明。如此当下拉菜单选取新值，所选的<option> value值会更新到ViewModel属性上；而一旦该属性被程序修改或因使用者输入改变，下拉菜单也会自动切到新值对应的<option >选项上。 -
selectedOptions :
针对可多选( multiple )的<select>，selectedOptions可绑定到ko.observableArray()类型属性，该数组使会即时反应使用者所选取的项目集合；而变更该obervableArray数组的元素项目，也会立刻变更对应option的selected状态。
下面一个简单应用展示，ViewModel定义了selectOptions数组(假设选项不会动态变化，故用一般数组即可，不用ko.observableArray)，数组元素对象各有t、v两个属性分别当作<option>的文字跟值，而下拉菜单的选取结果要反应到result这个ko.observable()属性上。于是<select>的data-bind写法如下:
<select id="selOptions" style='width: 120px' data-bind=" options: selectOptions, optionsText: 'text', optionsValue: 'value', value: result ">
为了观察选取结果，再增加一个<span data-bind="text: result">即时反应result内容。
另外我们声明一个chageToPhone()函数，将result的值强制指定为"老幺"，并用<input type="button" value="Set Phone" data-bind=" click: changeToPhone " />设定成点击时触发，借以观察是否修改result为Phone，下拉菜单也会自动跳到老幺选项上。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>konckout学习系列</title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.selectOptions = [
{name:"老大",id:1},
{name:"老二",id:2},
{name:"老幺",id:3}
];
self.result = ko.observable(2);//只能检测 value
self.changeToYoung=function(){
self.result(3); //ko.observable()声明的属性，使用propName("...")方式改变其值，才能通知相关UI产生联动效果
}
}
$(function () {
ko.applyBindings(new MyViewModel());
});
</script>
</head >
<body>
<!-- 指定options来源，option text/value对应的属性名称 -->
<select data-bind ="options:selectOptions, optionsText: 'name', optionsValue: 'id', value:result">
</select><br/>
排行：<span data-bind ="text:result" ></span ><br/>
<!-- 指定按钮click事件调用ViewModel中的特定函數修改result值 -->
<input type ="button" value ="老幺" data-bind ="click: changeToYoung"/>
</body>
</html>
运行效果：
备注：
本文版权归大家共用，不归本人所有，所有知识都来自于官网支持，书本，国内外论坛，大牛分享等等......后续将学习knockout.js的常用功能。
Knockout.js随手记(3)的更多相关文章
-
Knockout.js随手记(2)
计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox.Select的onchange.o ...
-
Knockout.js随手记(8)
visible, disable, css绑定 这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式. 先简单的 ...
-
Knockout.js随手记(7)
数组元素的新增/移除事件 前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上.当然我们想在数组增加或移除元素时加上自定义逻辑就好 ...
-
Knockout.js随手记(6)
实时反映对象属性的变化 在前一篇博客中我们使用了如下代码去新增user对象,即push方法: $("#btnAddUser").click(function () { vm.use ...
-
Knockout.js随手记(5)
以列表方式呈现数据 处理以数组形式储存的多条数据,要先认识foreach.在ViewModel定义一个JavaScript Array或是ko.observableArray() (observab ...
-
Knockout.js随手记(4)
动态绑定下拉列表 在<select> data-bind的options选项如果绑定到ko.observableArray(),就可以动态新增选项效果,也就是可以利用其完成常见的级联效果的 ...
-
Knockout.js随手记(1)
新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个Jav ...
-
【Knockout.js 学习体验之旅】（3）模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
-
【Knockout.js 学习体验之旅】（2）花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
随机推荐
-
重构5-Pull Up Field（字段上移）
我们来看看一个和上移方法十分类似的重构.我们处理的不是方法,而是字段. public abstract class Account{} public class CheckingAccount ext ...
-
【转】Usage of sendBroadcast()
原文网址:http://*.com/questions/4883079/usage-of-sendbroadcast sendBroadcast() - Should it b ...
-
cookie丢失、登陆自动退出问题解决
cookie保存在客户端或者内存中,不易丢失.但是在某些情况下会被忽略.在项目过程中遇到过跨域丢失的情况.在VS里面运行的程序,产生的cookie默认是没有domain值的,但是给它设定domain值 ...
-
Handle 消息机制
android中Handle类的主要作用: 1.在新启动的线程中发送给消息 2.在主线程获取.处理消息 为什么要用Handle这样的一个机制: 因为在Android系统中UI操作并不是线程安全的,如果 ...
-
[Android学习笔记]使用ListView
简单使用ListView 关键在于Adatper Adatper用来连接UI与数据源.Adapter既负责提供数据,又负责创建Item视图. 一般步骤: 1.创建list_item.xml,用来创建L ...
-
单点更新线段树 RMQ
D. Xenia and Bit Operations time limit per test 2 seconds memory limit per test 256 megabytes input ...
-
MakeFile 文件的作用
makefile文件保存了编译器和连接器的参数选项,还表述了所有源文件之间的关系(源代码文件需要的特定的包含文件,可执行文件要求包含的目标文件模块及库等).创建程序(make程序)首先读取makefi ...
-
CSS3 移动端 1PX 线变成0.5PX
.line1 {position:relative} .line1:after {content:'';position:absolute;bottom:0;left:0;width:100%;hei ...
-
Android之系统Action大全
String ADD_SHORTCUT_ACTION 动作:在系统中添加一个快捷方式.. “android.intent.action.ADD_SHORTCUT” String ALL_APPS_AC ...
-
采用dlopen、dlsym、dlclose加载动态链接库【总结】【转】
转自:https://www.cnblogs.com/Anker/p/3746802.html 1.前言 为了使程序方便扩展,具备通用性,可以采用插件形式.采用异步事件驱动模型,保证主程序逻辑不变,将 ...