- 浏览: 2159352 次
- 性别:
- 来自: 合肥
文章分类
- 全部博客 (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 1535问题:使用knockoutjs的过程中,有时候会发现一些奇怪的 ... -
Javascript Closures闭包、为什么要闭包(闭包作用)、变量作用域
2012-08-10 14:00 2119转自:http://www.jb51.net/article/ ... -
Javascript函数、变量的初始化顺序、Javascript上下文环境
2012-08-07 15:57 1851参考:Initialization of functions ... -
Javascript函数:函数声明、函数表达式、NFE被命名的函数表达式
2012-08-07 15:45 1183参考: functions-declaration ... -
Javascript alert object、JavaScript版本迷局
2012-07-30 15:18 24691,使用alert(object.toSource()) 注 ... -
knockoutjs -- if 绑定
2012-06-14 16:22 13027参考:http://knockoutjs.com/ ... -
jquery Fixture 插件
2012-06-07 10:16 1508jQuery.Fixture插件是一个包含在javascrip ... -
CoffeeScript
2012-04-20 15:05 1818CoffeeScript是一个被编译成javascript的小 ... -
javascriptmvc 3.2.2
2012-04-19 17:10 1358JavaScriptMVC是一个以MIT协议开源的Javasc ... -
knockoutjs -- all built-in buildings
2012-04-16 16:12 1002所有可用的binding值 文字和显示:visible, t ... -
knockoutjs -- applyBinding & Observables
2012-04-16 15:35 4494applyBindings ko.applyBindings( ... -
knockoutjs -- load save data(与服务器进行数据交互) & binding绑定
2012-04-10 15:51 6051和服务器交互数据: Knockout 是一纯javascrip ... -
使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
2012-04-10 13:20 11557var htmlData1 = $.ajax( ... -
knockoutjs foreach array绑定 表格 下拉框绑定
2012-04-09 16:04 11459动态表格使用observable arrays and the ... -
knockoutjs 静动态数据、行为绑定,计算属性及Sync同步更新 Value值更新事件控制
2012-04-09 15:24 9508data-bind="text: firstName ... -
knockoutjs -- 使用Model-View-ViewModel (MVVM) 模式简化动态Javascript UI
2012-04-09 14:35 3809Knockout 是个JavaScript library,帮 ... -
jquery-validation-1.9.0
2012-04-07 15:52 4310jQuery验证插件: 简单高 ... -
textarea文本框限制输入文本数量(Firefox,Chrome,Safari)、Javascript取得字符ASCII码值、常见字符ASCII码值
2012-04-07 10:35 2268// focus用来对应Chrome浏览器往文本框拖入值 ... -
JavaScript高级程序设计读书笔记-事件
2011-11-09 16:53 1485JavaScript和HTML之间的交互是通过用户和浏览器操作 ... -
JavaScript高级程序设计读书笔记-浏览器中的JavaScript&DOM基础
2011-11-09 14:52 943HTML中的JavaScript: <scr ...
相关推荐
将KnockoutJS与Nhibernate结合,可以创建出高效的SPA(单页应用)或者富客户端应用。在服务器端,Nhibernate负责处理数据持久化,而在客户端,KnockoutJS处理用户界面和数据的动态交互。通过JSON格式,Nhibernate...
- 支持多种客户端:一套后端程序可以适用于Web界面、移动设备等,无需修改代码。 然而,SPA也存在一些不足: - 初次加载时间可能较长:因为需要加载大量的JavaScript和CSS资源。 - SEO优化难度大:由于大部分内容...
**KnockoutJS** 是一个轻量级的MVVM(Model-View-ViewModel)JavaScript库,主要用于构建富交互的Web应用程序。它通过数据绑定和依赖跟踪机制,使得开发者能够更轻松地管理DOM(Document Object Model)与应用程序...
4. **兼容性**: 作为纯JavaScript库,KnockoutJS与任何服务器或客户端技术兼容,可以直接添加到现有的Web应用中,无需大规模重构。它在gzip压缩后大约13KB,适用于所有主流浏览器,包括IE6+、Firefox 2+、Chrome、...
Knockout(简称KO)是一个JavaScript库,可以帮助您用干净的底层数据模型创建丰富的反应迅速显示和编辑用户界面。任何时候你有UI的部分是动态更新(例如,根据用户的行为或者外部数据源的变化而变化),用KO可以帮助...
KnockoutJS是一个轻量级的JavaScript库,专注于MVVM(Model-View-ViewModel)模式,使得创建响应式用户界面变得简单。在2.0版本中,它继续提供了一种强大的方式来绑定数据模型和视图,使得在前端开发中处理DOM元素的...
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 ...
Asp.Net MVC 4 和 KnockoutJS 是两个在Web开发领域广泛应用的技术,它们结合使用能够构建出高效、动态且用户友好的Web应用。Asp.Net MVC 4 是Microsoft推出的一个强大的MVC(Model-View-Controller)框架,用于构建...
从knockoutjs官网制作的可离线使用的API和示例。
**KnockoutJS** 是一个轻量级的JavaScript库,专为构建富客户端应用程序而设计。它使用MVVM(Model-View-ViewModel)模式,帮助开发者实现数据绑定和动态界面更新,大大简化了DOM操作。这个"KnockoutJs_帮助文档_...
[Packt Publishing] KnockoutJS 入门教程 (英文版) [Packt Publishing] KnockoutJS Starter (E-Book) ☆ 出版信息:☆ [作者信息] Eric M. Barnard [出版机构] Packt Publishing [出版日期] 2012年11月23日 ...
**KnockoutJS** 是一个轻量级的JavaScript库,专为构建动态用户界面而设计。它使用MVVM(Model-View-ViewModel)模式,帮助开发者实现数据绑定和依赖跟踪,使得视图与数据模型之间的交互变得更加简单。中文手册提供...
knockoutjs,前台MVVM模式实现框架。knockoutjs能使前台数据源与html页面分离开来,让程序员专注于数据的变化。详情请参照knockoutjs.com。本文件于2012-7-31下载于knockout官方网站,版本号2.1.0
KnockoutJS是一个轻量级的MVVM(Model-View-ViewModel)库,它使得数据绑定和DOM操作变得更加简单。在KnockoutJS 3.X版本中,事件绑定(event binding)是其核心功能之一,允许开发者在用户与页面交互时调用特定的...
同时,我们配置了`opt`对象,其中包含状态(state)、动作(actions)和获取器(getters),然后调用`flux.createStore(opt)`创建Store并与KnockoutJS关联。 在视图绑定阶段,我们可以利用KnockoutJS的数据绑定特性,将...
淘汰赛饼干一个用于 KnockoutJS 的简单 jquery.cookie 扩展器用法在脚本导入中包含 javascript 文件knockout.cookie.js 。 使 observable 持久化它的值(基本上是一个会话)。 用cookie扩展它,它的值是存储 ...