Knockout.js随手记(4)
动态绑定下拉列表
在<select> data-bind的options选项如果绑定到ko.observableArray()，就可以动态新增选项效果，也就是可以利用其完成常见的级联效果的。
在这一篇文章中，我们用单页面完成无刷新的前台新增选项和使用MVC完成后台的动态添加2个例子。
范例一：
ViewModel中声明一个selectOptions属性为一个ko.observableArray()对象，并将其设为<select>的options下拉列表的数据源，再用两个<input>分別输入入Text及Value，输入內容点击新增按钮，此時就可看到下拉列表出現新增的选项內容。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>动态新增下拉列表选项</title>
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="Scripts/knockout-2.3.0.js"></script>
<script type="text/javascript">
//创建一个View对象
function ViewModel() {
var self = this;
//使用observableArray进行绑定可以动态变更option选项
self.selectOptions = ko.observableArray([
{ "text": "请选择", "value": "0" }
]);
self.result = ko.observable("0");//添加result监控属性，初始绑定值为0
} $(function () {
var vm = new ViewModel();
ko.applyBindings(vm);
$("#btnAddItem").click(function () {
vm.selectOptions.push({
"text": $("#txtOptText").val(),
"value": $("#txtOptValue").val()
});
});
});
</script>
</head>
<body>
<div style=" background-color:#0094ff; width:180px; margin:100px auto auto auto;">
<select style="background-color:ActiveCaption;width:100px" data-bind="options: selectOptions, optionsText: 'text', optionsValue: 'value', value: result"></select>Value=<span data-bind=" text: result"></span>
<div> Text: <input id="txtOptText" value="选项1"/></div>
<div>Value: <input id="txtOptValue" value="1" /></div>
<input type="button" value="新增选项" id='btnAddItem' />
</div>
</body>
</html>
运行效果如下：
范例二：Mvc结合knockout.js完成级联下拉菜单
本例只是为了模拟，所以数据比较简陋，当然也可以从数据库中出数据来进行处理。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/knockout-2.3.0.debug.js"></script>
</head>
<body>
<p>
<b style="color:#0094ff">选择学生:</b> @Html.DropDownList("Student", ViewBag.Students as SelectList, "请选择", new { onchange = "searchLover();" })
</p>
<p data-bind="visible: selectOptions().length > 0">
<b style="color:#0094ff">喜爱的事物:</b>
<select data-bind="options: selectOptions, optionsText: 'Name', optionsValue: 'Value', optionsCaption: '请选择'">
</select>
</p>
</body>
<script type="text/javascript">
function ViewModel() {
this.selectOptions = ko.observableArray([]);
}
var vm = new ViewModel();
ko.applyBindings(vm);
function searchLover() {
var id= $("#Student").val();
$.getJSON(
"@Url.Action("GetLovers")",
{ studentId: id},
function (data) {
vm.selectOptions(data);
});
}
</script>
</html>
-------------------------------------Controller中的数据模拟代码------------------------------------
using System.Collections.Generic;
using System.Web.Mvc; namespace KnockFunctionDemo.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
ViewBag.Students = new SelectList(GetStudentList(),"Id","Name");
return View();
}
private static List<Student> GetStudentList()
{
return new List<Student>
{
new Student{ Id=, Name="halower"},
new Student{ Id=, Name="rohelm"}
};
}
public JsonResult GetLovers(int studentId)
{
var list = new List<Lover>();
if (studentId == null)
list= null;
else if (studentId == )
{
list.Add(new Lover { Name = "编程", Value = "program" });
list.Add(new Lover { Name = "女朋友", Value = "GF" });
}
else
{
list.Add(new Lover { Name = "旅游", Value = "travel" });
list.Add(new Lover { Name = "家庭", Value = "family" });
}
return Json(list, JsonRequestBehavior.AllowGet);
} } public class Student
{
public int Id { get; set; }
public string Name { get; set; }
} public class Lover
{
public string Value { get; set; }
public string Name { get; set; }
}
}
运行效果：
备注：
本文版权归大家共用，不归本人所有，所有知识都来自于官网支持，书本，国内外论坛，大牛分享等等......后续将学习knockout.js的常用功能。
Knockout.js随手记(4)的更多相关文章
- 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随手记(3)
下拉菜单 <select>也是网页设计重要的一环,knockout.js(以下简称KO)也有不错的支持.针对<select>,在data-bind除了用value可对应下拉菜单 ...
- 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 ...
随机推荐
- Structure Of Management Information - SNMP Tutorial
30.6 The Structure Of Management Information In addition to the standards that specify MIB variables ...
- Java Web编程技术学习要点及方向
学习编程技术要点及方向亮点: 传统学习编程技术落后,应跟著潮流,要对业务聚焦处理.要Jar, 不要War:以小为主,以简为宝,集堆而成.去繁取简 Spring Boot,明日之春(future of ...
- 第二轮冲刺-Runner站立会议04
今天:查看gridview与baseadapter的连接 明天准备做什么:继续gridview与baseadapter适配器 遇到的困难:暂无
- Linux硬链接和软链接
1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节点 ...
- 面试题目——《CC150》树与图
面试题4.1:实现一个函数,检查二叉树是否平衡.在这个问题中,平衡树的定义如下:任意一个结点,其两颗子树的高度差不超过1. 思路:两个方法,第一种速度较快 package cc150; public ...
- Java学习笔记13---一个循环程序的设计范例
package welcome; import java.util.Scanner; /* * 一个循环程序的设计范例 * 首先编写仅执行一次的程序(当无循环时) * 循环的设计步骤: * 1.确定程 ...
- oracle 11g express 快速入门
创建表空间CREATE TABLESPACE testdb LOGGING DATAFILE 'F:\oracle\app\oracle\oradata\XE\testdb.dbf' SIZE 100 ...
- Android ViewPager sharedpreferences
http://www.cnblogs.com/dwinter/archive/2012/02/27/AndroidViewPager%E5%A4%9A%E9%A1%B5%E9%9D%A2%E6%BB% ...
- Android中finish掉其它的Activity
在Android开发时,一般情况下我们如果需要关掉当前Activity非常容易,只需要一行代码 this.finish;即可.那么,如果是想要在当前Activity中关掉其它的Activity应该怎么 ...
- 0、Web基本概念
一.Web的概念: 本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思. 二.Web的分类:Internet上供外界访问的Web资源分为静态Web资源和动态Web资源两种. 1.静态Web资源:W ...