转载http://desert3.iteye.com/blog/1480471

knockoutjs foreach array绑定 表格 下拉框绑定

博客分类:

 
动态表格使用observable arrays and the foreach 
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的自动依赖追踪相对象(如果是属性的话,就仅仅引用变量的值,做不到其他效果)

  1. // 下拉框绑定到$root.availableMeals数组,下拉框显示的文字内容由optionsText: 'mealName'决定,下拉框的值绑定到seats数组中对象SeatReservation的meal属性!
  2. <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select>

viewmodel(控制器)

  1. // Class to represent a row in the seat reservations grid
  2. function SeatReservation(name, initialMeal) {
  3. var self = this;
  4. self.name = name;
  5. self.meal = ko.observable(initialMeal);
  6. self.formattedPrice = ko.computed(function() {
  7. var price = self.meal().price;
  8. return price ? "$" + price.toFixed(2) : "None";
  9. });
  10. }
  11. // Overall viewmodel for this screen, along with initial state
  12. function ReservationsViewModel() {
  13. var self = this;
  14. // Non-editable catalog data - would come from the server
  15. self.availableMeals = [
  16. { mealName: "Standard (sandwich)", price: 0 },
  17. { mealName: "Premium (lobster)", price: 34.95 },
  18. { mealName: "Ultimate (whole zebra)", price: 290 }
  19. ];
  20. // Editable data
  21. self.seats = ko.observableArray([
  22. new SeatReservation("Steve", self.availableMeals[0]),
  23. new SeatReservation("Bert", self.availableMeals[0])
  24. ]);
  25. // Operations
  26. self.addSeat = function() {
  27. self.seats.push(new SeatReservation("", self.availableMeals[0]));
  28. }
  29. self.removeSeat = function(seat) { self.seats.remove(seat) }
  30. self.totalSurcharge = ko.computed(function() {
  31. var total = 0;
  32. for (var i = 0; i < self.seats().length; i++)
  33. total += self.seats()[i].meal().price;
  34. return total;
  35. });
  36. }
  37. ko.applyBindings(new ReservationsViewModel());

view视图

  1. <h2>Your seat reservations</h2>
  2. <table>
  3. <thead><tr>
  4. <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
  5. </tr></thead>
  6. <!-- Todo: Generate table body -->
  7. <tbody data-bind="foreach: seats">
  8. <tr>
  9. <td><input data-bind="value: name" /></td>
  10. <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
  11. <td data-bind="text: meal().price"></td>
  12. <td data-bind="text: formattedPrice"></td>
  13. <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
  14. </tr>
  15. </tbody>
  16. </table>
  17. <h3 data-bind="visible: totalSurcharge() > 0">
  18. Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
  19. </h3>
  20. <h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>
  21. <button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>

knockoutjs foreach array绑定 表格 下拉框绑定的更多相关文章

  1. C# 利用反射将枚举绑定到下拉框

    前言:反射(Reflection)是.NET提供给开发者的一个强大工具,尽管作为.NET框架的使用者,很多时候不会用到反射.但在一些情况下,尤其是在开发一些基础框架或公共类库时,使用反射会使系统架构更 ...

  2. 商品类型的下拉框绑定一个事件,通过ajax获取属性

    html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...

  3. winform c#绑定combobox下拉框 年度代码。

    winform c#绑定combobox下拉框 年度代码. comboBox1.Items.AddRange("});//邦定数据 comboBox1.Text = DateTime.Now ...

  4. EXT学习之——Ext下拉框绑定以及级联写法

    /*******步骤有四个,缺一不可*********/ function () {xxxxxx = Ext.extend(construct, {InitControl: function () { ...

  5. easyui源码翻译1.32--ComboGrid(数据表格下拉框)

    前言 扩展自$.fn.combo.defaults和$.fn.datagrid.defaults.使用$.fn.combogrid.defaults重写默认值对象.下载该插件翻译源码 数据表格下拉框结 ...

  6. ComboGrid( 数据表格下拉框)

    一. 加载方式//class 加载方式<select id="box" class="easyui-combogrid" name="dept& ...

  7. 枚举类返回Map键值对,绑定到下拉框

    有时候,页面的下拉框要显示键值对,但是不想从数据库取,此时我们可以写一个枚举类, Java后台代码 1.枚举类 import java.util.HashMap; import java.util.M ...

  8. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  9. DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit)

    DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) // 设置下拉框 ...

随机推荐

  1. Mysql 基本操作连接数据库读取信息内容

    <?php header("content-type:text/html; charset=utf-8"); // 数据库配置信息 define("DB_HOST& ...

  2. ant新建scp和sshexec任务

    1.build.xml中新建targer如下: <target name="remotecopytest" description="拷贝文件到远程服务器" ...

  3. C# 调用导致堆栈不对称。原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配

    在dllimport中加入CallingConvention参数就行了,[DllImport(PCAP_DLL, CharSet = CharSet.Auto, CallingConvention = ...

  4. 使用HackRF+GNU Radio 破解吉普车钥匙信号

    引文 我最近对软件定义的无线电技术(SDR)产生了浓厚的兴趣,而我对其中一款流行的SDR平台(HackRF)也产生了兴趣,而其频率接收的范围也在1MHz ~6GHz之间(范围较广).而这里也需要提及一 ...

  5. Http请求与响应格式

    原文:http://www.cnblogs.com/z941030/p/4699779.html Http协议对浏览器发出的Request格式以及对Web服务器发出的Response格式有具体的规定. ...

  6. Comments

    Nothing can be quite so helpful as a well-placed comment.Nothing can clutter up a module more than f ...

  7. Java 集合深入理解(9):Queue 队列

    点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情不太好,来学一下 List 吧! 什么是队列 队列是数据结构中比较重要的一种类型,它支持 FIFO,尾部添加.头部 ...

  8. HDU 4862(费用流)

    Problem Jump (HDU4862) 题目大意 给定一个n*m的矩形(n,m≤10),每个矩形中有一个0~9的数字. 一共可以进行k次游戏,每次游戏可以任意选取一个没有经过的格子为起点,并且跳 ...

  9. strlen和mb_strlen的区别

    在php中常见的计算字符串长度的函数有:strlen和mb_strlen.当字符全是英文字符的时候,两者是一样.这里主要比较一下,中英文混排的时候,两个计算结果. 在PHP中,strlen与mb_st ...

  10. Howto add permanent static routes in Ubuntu

    Static routing is the term used to refer to the manual method used to set up routing. An administrat ...