durandaljs 2.0导航

时间:2013-10-09 18:10:40

标签: durandal single-page-application

我有一个分页的观点。当用户点击页码时,我会显示该页面的数据。

我只想更换数据项,所以我不想导航到“下一页”。所以我正在做的是使用router.navigate(url,{replace:false,trigger:false});将页面添加到浏览器的历史记录中,但不会触发在那里导航。

如果在我获得数据后,我点击浏览器的后退按钮,URL会更改为上一个,但我没有收到任何事件。如果我回到上一页,我点击了浏览器的前进按钮,我从该页面获得了触发事件。

实施例。我在/#,它显示数据的第1页。用户单击页面上的“下一页”链接。我显示第2页的数据,然后用/#welcome / 2替换url现在如果我点击浏览器的后退按钮,URL会变回/#但页面不会触发。如果我按下浏览器的前进按钮,URL将变回/#welcome / 2并触发页面。现在已经发生这种情况,我可以点击后退按钮,第一页将触发;我可以在第1页和第2页之间来回切换。如果用户点击“第3页”,问题就会再次发生。

如果你们都需要一个有效的例子,我会部署它,但目前这只在我的本地盒子上运行。

1 个答案:

答案 0 :(得分:0)

IMO分页与分类/过滤一样,代表视图/窗口小部件的内部状态,不应通过路由显示。考虑例如用户在#something/3上并为该网址添加书签。删除几个项目后,再没有#something/3,书签就会失败。以下是关于该主题的更多思考食品http://lostechies.com/derickbailey/2011/08/03/stop-using-backbone-as-if-it-were-a-stateless-web-server/

根据评论

更新

点击浏览器的

activate因为两个原因没有调用。 a)welcome.js返回一个单例,b)在shell.html中,viewCache设置为true。当用户向前按浏览器时,它会被调用,因为此时第一次调用SPA透视图中的路径#welcome/2,因此activate启动。

使系统正常工作的一种方法是强制每个页面更改(无论是否由SPA或浏览器初始化)都在activate内运行。以下是必需的步骤:将单例转换为构造函数,设置cacheViews:false并使用调用页面路径的普通href替换单击事件。

更新2 这是一个结合inPage导航(没有路由器参与)和使用浏览器前后导航功能的示例。 init负责设置activategotoPage常见的内容。

视图模型

define(['plugins/router', 'knockout'], function( router, ko ) {

    var ctor = function() {
        this.pageNo = ko.observable();
        this.pageData = ko.observable();
    };

    ctor.prototype.activate = function( page ) {
        this.init(page);
    };

    ctor.prototype.init = function( page ) {
        this.pageNo(page || 1);
        this.pageData('Data for ' + this.pageNo());
    };

    ctor.prototype.gotoPage = function( page ) {
        var url = "extras/welcome/" + page;
        this.init(page);
        router.navigate(url, { replace: false, trigger: false });
    };

    return ctor;
});

视图

<section>
    <h1>
        Hello Durandal Pagination
    </h1>
    <a data-bind="click: gotoPage.bind($data, 1)" style="cursor: pointer;">Page 1</a>
    <a data-bind="click: gotoPage.bind($data, 2)" style="cursor: pointer;">Page 2</a>
    <a data-bind="click: gotoPage.bind($data, 3)" style="cursor: pointer;">Page 3</a>

    <h2 data-bind="text: pageData"></h2>
</section>

现场示例:http://dfiddle.github.io/dFiddle-2.0/#extras/welcome