1

我有一个分页视图。当用户单击页码时，我会显示该页面的数据。

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

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

例子。我在 /#，它正在显示数据的第 1 页。用户点击页面上的“下一页”链接。我显示第 2 页的数据，并将 url 替换为 /#welcome/2 现在，如果我单击浏览器的后退按钮，则 URL 会变回 /#，但页面不会触发。如果我按下浏览器的前进按钮，URL 会变回 /#welcome/2 并触发页面。既然已经发生了，我可以单击返回按钮，然后会触发第一页；我可以在第 1 页和第 2 页之间来回切换。如果用户单击“第 3 页”，则问题再次发生。

如果你们都需要一个工作示例，我将部署它，但目前这仅在我的本地机器上运行。

4

1 回答 1

0

IMO 分页，如排序/过滤代表视图/小部件的内部状态，不应通过路由呈现。考虑例如用户打开#something/3并为 url 添加书签。删除几个项目后，#something/3不再存在并且书签失败。这是关于该主题的更多思考http://lostechies.com/derickbailey/2011/08/03/stop-using-backbone-as-if-it-were-a-stateless-web-server/

根据评论更新：

activate在点击浏览器返回时，没有调用 get 有两个原因。a）welcome.js 返回一个单例，b）在 shell.html viewCache 中设置为 true。当用户按下浏览器前进时，它会被调用，因为此时#welcome/2从 SPA 角度来看的路由是第一次调用的，所以activate开始了。

使系统工作的一种方法是强制每个页面更改（无论它是由 SPA 还是浏览器初始化）通过activate. 以下是所需的步骤：将单例转换为构造函数，设置 cacheViews: false 并将点击事件替换为调用页面路由的普通 href。

更新 2 这是一个将 inPage 导航（不涉及路由器）与使用浏览器前后导航的能力相结合的示例。init负责设置 和 常用的activate东西gotoPage。

视图模型

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

于 2013-10-09T20:08:37.693 回答