knockoutjs foreach array绑定 表格 下拉框绑定
ko.observableArray: 观察者模式,根据array动态更新表格
ko中的流程控制标签:foreach, if, ifnot, and with
在foreach的数据源发生变化时,ko并不会重新生成整个table, 更高效地,ko会找到viewmodel中变化的部分, 然后更新数据变化对应的最小DOM集合。
data-bind="foreach: seats":foreach表格循环
meal().price: meal属性是一个被观察对象,在尝试取得子属性之前要使用meal()函数,即注意是meal().price, 不是 meal.price
data-bind="click: addSeat, enable: seats().length < 5":表示按钮绑定到click事件addSeat,并且按钮只在表格数据小于5时可用,删错或者增加表格数据,由于ko的自动依赖追踪机制,按钮的可用状态会自动变化。
data-bind="visible: totalSurcharge() > 0":用来控制控件是否显示,对应css的display 属性
$root.前缀代表Knockout去viewmodel的顶层查询相应属性,而不是绑定表格seats数组中的实例变量SeatReservation中查询。
必须是引用方法的形式(带括号)引用observable变量,这与ko的自动依赖追踪相对象(如果是属性的话,就仅仅引用变量的值,做不到其他效果)
- // 下拉框绑定到$root.availableMeals数组,下拉框显示的文字内容由optionsText: 'mealName'决定,下拉框的值绑定到seats数组中对象SeatReservation的meal属性!
- <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select>
viewmodel(控制器)
- // Class to represent a row in the seat reservations grid
- function SeatReservation(name, initialMeal) {
- var self = this;
- self.name = name;
- self.meal = ko.observable(initialMeal);
- self.formattedPrice = ko.computed(function() {
- var price = self.meal().price;
- return price ? "$" + price.toFixed(2) : "None";
- });
- }
- // Overall viewmodel for this screen, along with initial state
- function ReservationsViewModel() {
- var self = this;
- // Non-editable catalog data - would come from the server
- self.availableMeals = [
- { mealName: "Standard (sandwich)", price: 0 },
- { mealName: "Premium (lobster)", price: 34.95 },
- { mealName: "Ultimate (whole zebra)", price: 290 }
- ];
- // Editable data
- self.seats = ko.observableArray([
- new SeatReservation("Steve", self.availableMeals[0]),
- new SeatReservation("Bert", self.availableMeals[0])
- ]);
- // Operations
- self.addSeat = function() {
- self.seats.push(new SeatReservation("", self.availableMeals[0]));
- }
- self.removeSeat = function(seat) { self.seats.remove(seat) }
- self.totalSurcharge = ko.computed(function() {
- var total = 0;
- for (var i = 0; i < self.seats().length; i++)
- total += self.seats()[i].meal().price;
- return total;
- });
- }
- ko.applyBindings(new ReservationsViewModel());
view视图
- <h2>Your seat reservations</h2>
- <table>
- <thead><tr>
- <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
- </tr></thead>
- <!-- Todo: Generate table body -->
- <tbody data-bind="foreach: seats">
- <tr>
- <td><input data-bind="value: name" /></td>
- <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
- <td data-bind="text: meal().price"></td>
- <td data-bind="text: formattedPrice"></td>
- <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
- </tr>
- </tbody>
- </table>
- <h3 data-bind="visible: totalSurcharge() > 0">
- Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
- </h3>
- <h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>
- <button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>
knockoutjs foreach array绑定 表格 下拉框绑定的更多相关文章
- C# 利用反射将枚举绑定到下拉框
前言:反射(Reflection)是.NET提供给开发者的一个强大工具,尽管作为.NET框架的使用者,很多时候不会用到反射.但在一些情况下,尤其是在开发一些基础框架或公共类库时,使用反射会使系统架构更 ...
- 商品类型的下拉框绑定一个事件,通过ajax获取属性
html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...
- winform c#绑定combobox下拉框 年度代码。
winform c#绑定combobox下拉框 年度代码. comboBox1.Items.AddRange("});//邦定数据 comboBox1.Text = DateTime.Now ...
- EXT学习之——Ext下拉框绑定以及级联写法
/*******步骤有四个,缺一不可*********/ function () {xxxxxx = Ext.extend(construct, {InitControl: function () { ...
- easyui源码翻译1.32--ComboGrid(数据表格下拉框)
前言 扩展自$.fn.combo.defaults和$.fn.datagrid.defaults.使用$.fn.combogrid.defaults重写默认值对象.下载该插件翻译源码 数据表格下拉框结 ...
- ComboGrid( 数据表格下拉框)
一. 加载方式//class 加载方式<select id="box" class="easyui-combogrid" name="dept& ...
- 枚举类返回Map键值对,绑定到下拉框
有时候,页面的下拉框要显示键值对,但是不想从数据库取,此时我们可以写一个枚举类, Java后台代码 1.枚举类 import java.util.HashMap; import java.util.M ...
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit)
DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) // 设置下拉框 ...
随机推荐
- ubuntu 添加源
edit file : /etc/apt/sources.list add: deb http://mirrors.163.com/ubuntu/ intrepid main restricted ...
- Struts2 和 spring mvc的 迭代标签常用属性对比
<s:iterator value="#users" var="u" status="st"> <c:forEach i ...
- [Python陷阱]os.system调用shell脚本获取返回值
当前有shell个脚本/tmp/test.sh,内容如下: #!/bin/bashexit 11 使用Python的os.system调用,获取返回值是: >>> ret=os.sy ...
- SyntaxError: missing ; before statement 错误的解决
今天jsp页面中报错:SyntaxError: missing ; before statement 简单的理解是语法错误,F12调试之后发现原来是我定义的一个js中的全局变量的问题. <scr ...
- (转)HTML5 本地存储
原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...
- hadoop中Text类 与 java中String类的区别
hadoop 中 的Text类与java中的String类感觉上用法是相似的,但两者在编码格式和访问方式上还是有些差别的,要说明这个问题,首先得了解几个概念: 字符集: 是一个系统支持的所有抽象字符的 ...
- 王家卫i
〈旺角卡门〉 因为我很了解我自己,我不能对你承诺什么. 你不要说两次,说两次我就相信了. 我宁愿做一日英雄,都不想成世做条虫! 厨房里有煮好的饭,另外我还买了几个杯子,我知道,用不了多久就都会被打破, ...
- ERP客户关系渠管理(二十)
渠道的需求:
- VM命令行操作
vim-cmd vmsvc/getallvms /查看ESXi上所有虚拟机信息,主要查看虚拟机对应的ID号 vim-cmd vmsvc/power.on <VM ID> /对应ID的虚 ...
- Asp登陆
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="QYLogin.aspx.c ...