转载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. iphone获取当前磁盘信息

    获取iphone磁盘总大小.已使用空间.空闲空间 [代码]悦德财富:https://www.yuedecaifu.com 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  2. 功率与dbm的对照表

     功率与dbm的对照表 分类: 嵌入式 功率与dbm的对照表 对于无线工程师来说更常用分贝dBm这个单位,dBm单位表示相对于1毫瓦的分贝数,dBm和W之间的关系是:dBm=10*lg(mW)1w的功 ...

  3. matlab的正则表达式讲解[转]

    引言.啥是正则表达式?正则表达式是干啥的?我理解就和我们在word或者其他编辑软件里点的查找.替换的作用是差不多的,不过功能要强大的多,当然使用起来也稍微复杂一些.书上的定义差不多是这样的:正则表达式 ...

  4. 刷固件Layer1到手机FLASH(硬刷)

    开头: 注意:本文章并不是做GSM 嗅探必须的,平时我们刷机叫软刷是刷到内存里面的,断电就消失了,这个是硬刷,刷到flash里面的,断电不消失,开机就运行的. 本文章经过作者实测可行,这只是单个应用程 ...

  5. 国产单机RPG游戏的情怀

    最近在玩儿仙剑奇侠传5,这个游戏从小时候玩儿到现在,也算是见证了一代人的成长,小时候没少玩盗版,现在自己工作了,有了固定的收入,也能体会到游戏开发者的不容易,尤其是单机游戏这个圈子,现在国内几乎没有人 ...

  6. scp 在Ubuntu下传文件 基于ssh

    scp是linux下的远程拷贝 命令: (1)将本地文件拷贝到远程:scp  文件名 用户名@计算机IP或者计算机名称:远程路径  (2)从远程将文件拷回本地:scp  用户名@计算机IP或者计算机名 ...

  7. ERP权限设置和CRM分析 (十二)

    个人信息管理: 需求描述: 1.在权限信息表添加一条个人信息修改权限. 2.在TreeMenu表添加一条数据作为个"人信息修改"菜单. 3. 人事登记人员在登记员工信息的时候,自动 ...

  8. C# asp.net IIS 在web.config和IIS中设置Session过期时间

    有时候在web.config设置sessionState 或者类文件里设置Session.Timeout,在IIS里访问时每次都是达不到时间就超时,原因是因为在IIS中设置了Session的超时时间, ...

  9. [转]设计模式(22)-Strategy Pattern

    一. 策略(Strategy)模式 策略模式的用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. 假 设现 ...

  10. qq红心头像[中国心]制作教程之Photoshop教程

    QQ红心头像[中国心]制作教程之Photoshop教程 中国最大的WEB开发资源网站及技术社区,阿里西西WEB开发 最近网络流传着很多qq红心头像,msn红心头像,中国心图标等等,最有些搞笑的是还有正 ...