- 浏览: 2139870 次
- 性别:
- 来自: 合肥
文章分类
- 全部博客 (401)
- Agile (16)
- Apache Commons (3)
- Architecture (8)
- DB.MongoDB (5)
- DB.Mysql (3)
- DB.Oracle (34)
- DirectoryService (1)
- DotNet (1)
- English (3)
- Groovy (0)
- Html (28)
- Java (67)
- Java.Aixs (7)
- Java.Cache (2)
- Java.jPBM (1)
- Java.Resin (6)
- Java.Spring (4)
- Java.Struts2 (5)
- Java.Tomcat (16)
- Javascript (45)
- Javascript.Google Map (2)
- Javascript.Jquery (8)
- Life (15)
- Maven&Ant (4)
- Network (5)
- OS.Linux (45)
- OS.Windows (10)
- OS.Windows.Office (1)
- PlayFramework (15)
- Python (28)
- Reading notes (11)
- Security (13)
- Server.Apache (3)
- Server.Nginx (7)
- Test (6)
- Tool (15)
- Work.Solution (15)
- Other (20)
- SSO&CAS&Identity (13)
最新评论
-
hutuxiansheng123:
防火墙、Iptables、netfilter/iptables、NAT 概述 -
dacoolbaby:
非常棒的正则表达式,非常适用。万分感谢。
用python分析nginx的access日志 -
loot00:
您好! 我也遇到了相同的错误信息。我是用f_link_lob ...
LOB variable no longer valid after subsequent fetch -
feihangchen:
@OnApplicationStop public clas ...
Play framework 1.2.3 Jobs定时任务、异步任务、引导任务、触发任务、关闭任务 -
洞渊龙王:
谢谢了
www.w3.org被qiang导致logback报错:Connect reset
动态表格使用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的自动依赖追踪相对象(如果是属性的话,就仅仅引用变量的值,做不到其他效果)
viewmodel(控制器)
view视图
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 变量引用方式、怪异问题排查
2012-08-24 15:01 1489问题:使用knockoutjs的过程中,有时候会发现一些奇怪的 ... -
Javascript Closures闭包、为什么要闭包(闭包作用)、变量作用域
2012-08-10 14:00 2079转自:http://www.jb51.net/article/ ... -
Javascript函数、变量的初始化顺序、Javascript上下文环境
2012-08-07 15:57 1816参考:Initialization of functions ... -
Javascript函数:函数声明、函数表达式、NFE被命名的函数表达式
2012-08-07 15:45 1138参考: functions-declaration ... -
Javascript alert object、JavaScript版本迷局
2012-07-30 15:18 24261,使用alert(object.toSource()) 注 ... -
knockoutjs -- if 绑定
2012-06-14 16:22 12995参考:http://knockoutjs.com/ ... -
jquery Fixture 插件
2012-06-07 10:16 1472jQuery.Fixture插件是一个包含在javascrip ... -
CoffeeScript
2012-04-20 15:05 1783CoffeeScript是一个被编译成javascript的小 ... -
javascriptmvc 3.2.2
2012-04-19 17:10 1313JavaScriptMVC是一个以MIT协议开源的Javasc ... -
knockoutjs -- all built-in buildings
2012-04-16 16:12 969所有可用的binding值 文字和显示:visible, t ... -
knockoutjs -- applyBinding & Observables
2012-04-16 15:35 4463applyBindings ko.applyBindings( ... -
knockoutjs -- load save data(与服务器进行数据交互) & binding绑定
2012-04-10 15:51 5996和服务器交互数据: Knockout 是一纯javascrip ... -
使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
2012-04-10 13:20 11523var htmlData1 = $.ajax( ... -
knockoutjs 单页引用 客户端重定向(location.hash history.pushState)
2012-04-10 10:33 4346大部分现代的,相应的 ... -
knockoutjs 静动态数据、行为绑定,计算属性及Sync同步更新 Value值更新事件控制
2012-04-09 15:24 9475data-bind="text: firstName ... -
knockoutjs -- 使用Model-View-ViewModel (MVVM) 模式简化动态Javascript UI
2012-04-09 14:35 3780Knockout 是个JavaScript library,帮 ... -
jquery-validation-1.9.0
2012-04-07 15:52 4278jQuery验证插件: 简单高 ... -
textarea文本框限制输入文本数量(Firefox,Chrome,Safari)、Javascript取得字符ASCII码值、常见字符ASCII码值
2012-04-07 10:35 2231// focus用来对应Chrome浏览器往文本框拖入值 ... -
JavaScript高级程序设计读书笔记-事件
2011-11-09 16:53 1439JavaScript和HTML之间的交互是通过用户和浏览器操作 ... -
JavaScript高级程序设计读书笔记-浏览器中的JavaScript&DOM基础
2011-11-09 14:52 893HTML中的JavaScript: <scr ...
相关推荐
ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性,本文将详细介绍,需要的朋友参考下
foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM-插入或去除相关项目或重新...
不幸的是,在使用KnockoutJS的第一年左右,我收集了很多这样的东西,而没有维护源位置。 如果您在这里看到自己的作品,请告诉我,我会给你功劳! / src每个bindingHandler包含一个文件 / html包含示例文件,这些...
KnockoutJS包括mapping插件,成熟前端框架,结合Nhibernate使用,大幅减少数据绑定代码操作
全能 jQuery Sparkline 的 KnockoutJS 自定义绑定 依赖 没有凉亭。 项目与 Bower 重生。 扩展选项 TODO:这些可以通过将对象传递给绑定器而不是使用单独的绑定来以更友好的 KnockoutJS 代码样式处理。 时间窗口...
textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素。他提供了DOM和viewmodel的双向更新。不同于value绑定,textinput绑定是实时更新的。 例如: 源码: <p>Login name: <input ...
[Packt Publishing] KnockoutJS 入门教程 (英文版) [Packt Publishing] KnockoutJS Starter (E-Book) ☆ 出版信息:☆ [作者信息] Eric M. Barnard [出版机构] Packt Publishing [出版日期] 2012年11月23日 ...
KnockoutJS is a Model View ViewModel (MVVM) framework that allows you to simplify the design of complex user. Knockout makes data manipulation simple and leads to maintainable web applications. ...
knockoutjs,前台MVVM模式实现框架。knockoutjs能使前台数据源与html页面分离开来,让程序员专注于数据的变化。详情请参照knockoutjs.com。本文件于2012-7-31下载于knockout官方网站,版本号2.1.0
Asp.Net MVC 4 KnockoutJS 框架实例
Starting with the installation and configuration of KnockoutJS, this book will describe the ins and outs of working with forms using arrays, nesting, and grids. You will learn about event binding and...
event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数,这篇文章主要介绍了KnockoutJS 3.X API 第四章之事件event绑定的相关知识,感兴趣的朋友一起看看吧
KnockoutJs官方文档汉化完整版+Knockout精品文章,绝对超值
KnockoutJs 官方文档汉化完整版手册 中文版 +Knockout精品文章 (如果有下载打不开的,请右键点击文件--》选择“属性”--》点击“解除锁定”,重新打开就可以了)
KnockoutJS绑定具有视觉反馈的按钮。 拉请求欢迎。 现场例子 要求 KnockoutJS(显然) jQuery的 特征 提供视觉反馈 按下按钮已发生并触发了一些事件在此阶段按钮被禁用 活动成功 活动失败 活动已准备就绪,可以...
主要介绍了KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定的相关资料,需要的朋友可以参考下
敲除扩张器KnockoutJS 绑定以展开和折叠元素。 许可要求KnockoutJS 3 或更高版本jQuery 1.6 或更高版本例子
通过js knockoutjs 实现省市区三级联动非常方便
KnockoutJS中文文档新,chm格式的,文档比较新,chm格式也很方便使用