`
desert3
  • 浏览: 2160621 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

knockoutjs 单页引用 客户端重定向(location.hash history.pushState)

 
阅读更多
大部分现代的,相应的,迷人的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发生变化时触发

<!-- 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

    将KnockoutJS与Nhibernate结合,可以创建出高效的SPA(单页应用)或者富客户端应用。在服务器端,Nhibernate负责处理数据持久化,而在客户端,KnockoutJS处理用户界面和数据的动态交互。通过JSON格式,Nhibernate...

    WebApi+Bootstrap+KnockoutJs打造单页面程序

    - 支持多种客户端:一套后端程序可以适用于Web界面、移动设备等,无需修改代码。 然而,SPA也存在一些不足: - 初次加载时间可能较长:因为需要加载大量的JavaScript和CSS资源。 - SEO优化难度大:由于大部分内容...

    KnockoutJS中文文档新

    **KnockoutJS** 是一个轻量级的MVVM(Model-View-ViewModel)JavaScript库,主要用于构建富交互的Web应用程序。它通过数据绑定和依赖跟踪机制,使得开发者能够更轻松地管理DOM(Document Object Model)与应用程序...

    knockoutjs2.0入门.pdf

    4. **兼容性**: 作为纯JavaScript库,KnockoutJS与任何服务器或客户端技术兼容,可以直接添加到现有的Web应用中,无需大规模重构。它在gzip压缩后大约13KB,适用于所有主流浏览器,包括IE6+、Firefox 2+、Chrome、...

    KnockoutJS_3.xx版本

    Knockout(简称KO)是一个JavaScript库,可以帮助您用干净的底层数据模型创建丰富的反应迅速显示和编辑用户界面。任何时候你有UI的部分是动态更新(例如,根据用户的行为或者外部数据源的变化而变化),用KO可以帮助...

    knockoutjs2.0入门.docx

    KnockoutJS是一个轻量级的JavaScript库,专注于MVVM(Model-View-ViewModel)模式,使得创建响应式用户界面变得简单。在2.0版本中,它继续提供了一种强大的方式来绑定数据模型和视图,使得在前端开发中处理DOM元素的...

    KnockoutJS Essentials(PACKT,2015)

    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 Web Development(PACKT,2015)

    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 框架实例

    Asp.Net MVC 4 和 KnockoutJS 是两个在Web开发领域广泛应用的技术,它们结合使用能够构建出高效、动态且用户友好的Web应用。Asp.Net MVC 4 是Microsoft推出的一个强大的MVC(Model-View-Controller)框架,用于构建...

    knockoutjs.chm 网站原版API and 示例

    从knockoutjs官网制作的可离线使用的API和示例。

    KnockoutJs_帮助文档_中文手册 chm

    **KnockoutJS** 是一个轻量级的JavaScript库,专为构建富客户端应用程序而设计。它使用MVVM(Model-View-ViewModel)模式,帮助开发者实现数据绑定和动态界面更新,大大简化了DOM操作。这个"KnockoutJs_帮助文档_...

    [KnockoutJS] KnockoutJS 入门教程 (英文版)

    [Packt Publishing] KnockoutJS 入门教程 (英文版) [Packt Publishing] KnockoutJS Starter (E-Book) ☆ 出版信息:☆ [作者信息] Eric M. Barnard [出版机构] Packt Publishing [出版日期] 2012年11月23日 ...

    KnockoutJs 帮助文档 中文手册

    **KnockoutJS** 是一个轻量级的JavaScript库,专为构建动态用户界面而设计。它使用MVVM(Model-View-ViewModel)模式,帮助开发者实现数据绑定和依赖跟踪,使得视图与数据模型之间的交互变得更加简单。中文手册提供...

    knockoutjs2.1.0

    knockoutjs,前台MVVM模式实现框架。knockoutjs能使前台数据源与html页面分离开来,让程序员专注于数据的变化。详情请参照knockoutjs.com。本文件于2012-7-31下载于knockout官方网站,版本号2.1.0

    KnockoutJS 3.X API 第四章之事件event绑定

    KnockoutJS是一个轻量级的MVVM(Model-View-ViewModel)库,它使得数据绑定和DOM操作变得更加简单。在KnockoutJS 3.X版本中,事件绑定(event binding)是其核心功能之一,允许开发者在用户与页面交互时调用特定的...

    在knockoutjs 上自己实现的flux(实例讲解)

    同时,我们配置了`opt`对象,其中包含状态(state)、动作(actions)和获取器(getters),然后调用`flux.createStore(opt)`创建Store并与KnockoutJS关联。 在视图绑定阶段,我们可以利用KnockoutJS的数据绑定特性,将...

    knockout-cookie:一个用于 KnockoutJS 的简单 jquery.cookie 扩展器

    淘汰赛饼干一个用于 KnockoutJS 的简单 jquery.cookie 扩展器用法在脚本导入中包含 javascript 文件knockout.cookie.js 。 使 observable 持久化它的值(基本上是一个会话)。 用cookie扩展它,它的值是存储 ...

Global site tag (gtag.js) - Google Analytics