下拉菜单

<select>也是网页设计重要的一环,knockout.js(以下简称KO)也有不错的支持。针对<select>,在data-bind除了用value可对应下拉菜单的选取结果,其选项也可以由ViewModel中取得,甚至动态改变。

以下是<select>常用的data-bind参数:

  1. options : 
    指向数组或ko.observableArray(),KO会将数组元素转换为下拉选项。如果是ko.observableArray(),当动态增加或移除阵列元素时,下拉选项也会马上跟着增减。
  2. optionsText, optionsValue : 
    用来产生下拉选项的数组元素可以是具有多个属性的JavaScript对象,通过optionText, optionValue设定属性名称字符串,我们可以指定用哪个属性当成<option>的文字内容,哪个属性当成value 。
  3. value : 
    指向ViewModel的特定属性,属性一般以ko.observable()声明。如此当下拉菜单选取新值,所选的<option> value值会更新到ViewModel属性上;而一旦该属性被程序修改或因使用者输入改变,下拉菜单也会自动切到新值对应的<option >选项上。
  4. 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)的更多相关文章

  1. Knockout.js随手记(2)

    计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox.Select的onchange.o ...

  2. Knockout.js随手记(8)

    visible, disable, css绑定 这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式. 先简单的 ...

  3. Knockout.js随手记(7)

    数组元素的新增/移除事件 前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上.当然我们想在数组增加或移除元素时加上自定义逻辑就好 ...

  4. Knockout.js随手记(6)

    实时反映对象属性的变化 在前一篇博客中我们使用了如下代码去新增user对象,即push方法: $("#btnAddUser").click(function () { vm.use ...

  5. Knockout.js随手记(5)

    以列表方式呈现数据  处理以数组形式储存的多条数据,要先认识foreach.在ViewModel定义一个JavaScript Array或是ko.observableArray() (observab ...

  6. Knockout.js随手记(4)

    动态绑定下拉列表 在<select> data-bind的options选项如果绑定到ko.observableArray(),就可以动态新增选项效果,也就是可以利用其完成常见的级联效果的 ...

  7. Knockout.js随手记(1)

    新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个Jav ...

  8. 【Knockout.js 学习体验之旅】(3)模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  9. 【Knockout.js 学习体验之旅】(2)花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

随机推荐

  1. mac下需要安装旧 Java SE 6 才能打开程序解决办法

    今天我在mac系统下面安装myeclipse2014(myeclipse-pro-2014-GA-offline-installer-macosx.dmg)的时候,发现显示错误: 您需要安装旧 Jav ...

  2. PHP处理0e开头md5哈希字符串缺陷/bug

    PHP在处理哈希字符串时,会利用”!=”或”==”来对哈希值进行比较,它把每一个以”0E”开头的哈希值都解释为0,所以如果两个不同的密码经过哈希以后,其哈希值都是以”0E”开头的,那么PHP将会认为他 ...

  3. gulp同步执行任务

    使用插件:gulp-sync,npm install --save-dev gulp-sync 使用方法参考:https://www.npmjs.com/package/gulp-sync 这些插件也 ...

  4. Linux系统下的程序开发之:命名规范

    2016年12月13日16:19:53 ------------------------------- 不能使用类似驼峰法的命名文件:dingdanOrder.html 这样的命名,会让系统无法找到目 ...

  5. Protobuf for Python测试保存和读取文件

    安装pip, setuptools, and wheel 如果已经从python.org,安装啦Python 2 >=2.7.9 or Python 3 >=3.4 ,那么就已经有啦pip ...

  6. Logistic Regression - Formula Deduction

    Sigmoid Function \[ \sigma(z)=\frac{1}{1+e^{(-z)}} \] feature: axial symmetry: \[ \sigma(z)+ \sigma( ...

  7. margin和padding的区别

    目前web2.0已经越来被人们认可,因为喜欢搞web开发的人员不得不硬着头皮去学习web2.0的标准,其中很重要的一条就是新的布局规则,div+css.以前基本上是用table布局的,这种传统的方式简 ...

  8. C# Httpclient编程

    今天研究了一天C#如何添加cookie到httpcient里面,从而发请求时,能把cookie作为头部发出,最后发现根本加不进去. Httpclient的cookie是来自上一个请求的响应,httpc ...

  9. 使用count结合nvl函数时碰到的问题

    count()函数功能:统计表中中某个字段或所有记录个数,字段值为null的不做统计. 手册中解释: COUNT returns the number of rows returned by the ...

  10. angularjs中父,子,兄之间controller值得传递

    使用angularjs,发现controller间的值传递,比较麻烦的,以后几篇文章会陆续说几种方法. 一,angularjs $broadcast $emit $on的处理思想 在一个control ...