Question

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

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

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

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

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

Answer 1

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负责设置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

durandaljs 2.0导航

1 个答案:

视图模型

视图