- 浏览: 2139855 次
- 性别:
- 来自: 合肥
文章分类
- 全部博客 (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
大部分现代的,相应的,迷人的Web应用已经超越经典的Ajax,变成单页引用(single page applications:)。用户能象使用本地应用一样,在一个界面内完成各种操作,一个很著名的例子就是:GMail。
这些单页引用使用hash-based url 或者 pushState 导航来支持 浏览器的回退、前进、书签操作。(location.hash就是#锚点,一般用在Web页面内部的片段之间进行导航!)
data-bind="text: $data": $data表示引用foreach循环中的数组数据
data-bind="with: chosenFolderData": with表示后面的变量chosenFolderData不是null时,才使用绑定的相关控件。with内部的所有控件绑定变量时,引用就不需要再加chosenFolderData.前缀了,直接使用mails就可以
chosenFolderId, chosenFolderData , chosenMailData 都是被观察对象,在相关操作时给这些变量设置, 然后一些绑定到这些变量的UI会被自动更新。chosenFolderId是被观察者,所有取值、设置都是通过方法的形式做的
client-side navigation客户端重导航,使用hash-based url 或者 pushState技术。Sammy 就是使用hash-based url。
Sammy js client-side navigation的基本技术是采用一层额外的indirection客户端内部定向。没有使用之前,goToFolder 和goToMail 方法都是直接调用Ajax请求然后更新viewmodel 的状态。使用后,goToFolder 和goToMail 方法仅仅触发client-side navigation客户端导航,然后Sammy 包会捕获到客户端导航操作再发出相应的Ajax请求后再更新viewmodel状态。indirection客户端内部定向也就意味着如果用户点击浏览器上面的回退、前进按钮,Sammy会捕获到这些请求,然后viewmodel 会被正常更新
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。一个完整的URL地址的格式为:协议://主机:端口/路径名称#hash标识?搜索条件,
而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin?a=1的location.hash="#admin?a=1"。
onhashchange在#后面的url发生变化时触发
这些单页引用使用hash-based url 或者 pushState 导航来支持 浏览器的回退、前进、书签操作。(location.hash就是#锚点,一般用在Web页面内部的片段之间进行导航!)
data-bind="text: $data": $data表示引用foreach循环中的数组数据
data-bind="with: chosenFolderData": with表示后面的变量chosenFolderData不是null时,才使用绑定的相关控件。with内部的所有控件绑定变量时,引用就不需要再加chosenFolderData.前缀了,直接使用mails就可以
chosenFolderId, chosenFolderData , chosenMailData 都是被观察对象,在相关操作时给这些变量设置, 然后一些绑定到这些变量的UI会被自动更新。chosenFolderId是被观察者,所有取值、设置都是通过方法的形式做的
client-side navigation客户端重导航,使用hash-based url 或者 pushState技术。Sammy 就是使用hash-based url。
Sammy js client-side navigation的基本技术是采用一层额外的indirection客户端内部定向。没有使用之前,goToFolder 和goToMail 方法都是直接调用Ajax请求然后更新viewmodel 的状态。使用后,goToFolder 和goToMail 方法仅仅触发client-side navigation客户端导航,然后Sammy 包会捕获到客户端导航操作再发出相应的Ajax请求后再更新viewmodel状态。indirection客户端内部定向也就意味着如果用户点击浏览器上面的回退、前进按钮,Sammy会捕获到这些请求,然后viewmodel 会被正常更新
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。一个完整的URL地址的格式为:协议://主机:端口/路径名称#hash标识?搜索条件,
而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin?a=1的location.hash="#admin?a=1"。
onhashchange在#后面的url发生变化时触发
<!-- Todo: Create UI --> <script src="/scripts/lib/sammy.js" type="text/javascript"></script> <!-- Folders --> <ul class="folders" data-bind="foreach: folders"> <li data-bind="text: $data, css: { selected: $data == $root.chosenFolderId() }, click: $root.goToFolder"></li> </ul> <!-- Mails grid --> <table class="mails" data-bind="with: chosenFolderData"> <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead> <tbody data-bind="foreach: mails"> <tr data-bind="click: $root.goToMail"> <td data-bind="text: from"></td> <td data-bind="text: to"></td> <td data-bind="text: subject"></td> <td data-bind="text: date"></td> </tr> </tbody> </table> <!-- Chosen mail --> <div class="viewMail" data-bind="with: chosenMailData"> <div class="mailInfo"> <h1 data-bind="text: subject"></h1> <p><label>From</label>: <span data-bind="text: from"></span></p> <p><label>To</label>: <span data-bind="text: to"></span></p> <p><label>Date</label>: <span data-bind="text: date"></span></p> </div> <p class="message" data-bind="html: messageContent" /> </div>
function WebmailViewModel() { // Data var self = this; self.folders = ['Inbox', 'Archive', 'Sent', 'Spam']; self.chosenFolderId = ko.observable(); self.chosenFolderData = ko.observable(); self.chosenMailData = ko.observable(); // Behaviours //self.goToFolder = function(folder) { // self.chosenFolderId(folder); // self.chosenMailData(null); // Stop showing a mail // $.get('/mail', { folder: folder }, self.chosenFolderData); //}; //self.goToMail = function(mail) { // self.chosenFolderId(mail.folder); // self.chosenFolderData(null); // Stop showing a folder // $.get("/mail", { mailId: mail.id }, self.chosenMailData); //}; self.goToFolder = function(folder) { location.hash = folder }; self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id }; // Show inbox by default // self.goToFolder('Inbox'); // Client-side routes Sammy(function() { this.get('#:folder', function() { self.chosenFolderId(this.params.folder); self.chosenMailData(null); $.get("/mail", { folder: this.params.folder }, self.chosenFolderData); }); this.get('#:folder/:mailId', function() { self.chosenFolderId(this.params.folder); self.chosenFolderData(null); $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData); }); this.get('', function() { this.app.runRoute('get', '#Inbox') }); }).run(); }; ko.applyBindings(new WebmailViewModel());
发表评论
-
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 foreach array绑定 表格 下拉框绑定
2012-04-09 16:04 11411动态表格使用observable arrays and the ... -
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 1438JavaScript和HTML之间的交互是通过用户和浏览器操作 ... -
JavaScript高级程序设计读书笔记-浏览器中的JavaScript&DOM基础
2011-11-09 14:52 893HTML中的JavaScript: <scr ...
相关推荐
KnockoutJS中文文档新,chm格式的,文档比较新,chm格式也很方便使用
Knockout(简称KO)是一个JavaScript库,可以帮助您用干净的底层数据模型创建丰富的反应迅速显示和编辑用户界面。任何时候你有UI的部分是动态更新(例如,根据用户的行为或者外部数据源的变化而变化),用KO可以帮助...
KnockoutJS包括mapping插件,成熟前端框架,结合Nhibernate使用,大幅减少数据绑定代码操作
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. ...
This book is for web developers and designers who work with HTML and JavaScript to help them manage data and interactivity with data using KnockoutJS. Knowledge about jQuery will be useful but is not ...
从knockoutjs官网制作的可离线使用的API和示例。
主要介绍了WebApi+Bootstrap+KnockoutJs打造单页面程序的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
[Packt Publishing] KnockoutJS 入门教程 (英文版) [Packt Publishing] KnockoutJS Starter (E-Book) ☆ 出版信息:☆ [作者信息] Eric M. Barnard [出版机构] Packt Publishing [出版日期] 2012年11月23日 ...
knockoutjs,前台MVVM模式实现框架。knockoutjs能使前台数据源与html页面分离开来,让程序员专注于数据的变化。详情请参照knockoutjs.com。本文件于2012-7-31下载于knockout官方网站,版本号2.1.0
event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数,这篇文章主要介绍了KnockoutJS 3.X API 第四章之事件event绑定的相关知识,感兴趣的朋友一起看看吧
淘汰赛饼干一个用于 KnockoutJS 的简单 jquery.cookie 扩展器用法在脚本导入中包含 javascript 文件knockout.cookie.js 。 使 observable 持久化它的值(基本上是一个会话)。 用cookie扩展它,它的值是存储 ...
Asp.Net MVC 4 KnockoutJS 框架实例
。。。
。。。
首先要到http://knockoutjs.com/index.html下载最新版本的Knockoutjs,笔者这里下载的是knockout-2.2.0.js。然后新建一个.html文件,在html文档中加入以下的语句导入此js: [removed][removed] 到这里我们就已经...
KnockoutJs官方文档汉化完整版+Knockout精品文章,绝对超值
KnockoutJs 官方文档汉化完整版手册 中文版 +Knockout精品文章 (如果有下载打不开的,请右键点击文件--》选择“属性”--》点击“解除锁定”,重新打开就可以了)
警告如果您无话可说,那么impress.js可能对您没有帮助;)关于名字impress.js的名称。 Open / LibreOffice演示工具称为Impress是一个(不幸的)巧合;)版本历史0.5.3(, , )错误修复0.5版引入了包括impress:...