我有一个分页的观点。当用户点击页码时,我会显示该页面的数据。
我只想更换数据项,所以我不想导航到“下一页”。所以我正在做的是使用router.navigate(url,{replace:false,trigger:false});将页面添加到浏览器的历史记录中,但不会触发在那里导航。
如果在我获得数据后,我点击浏览器的后退按钮,URL会更改为上一个,但我没有收到任何事件。如果我回到上一页,我点击了浏览器的前进按钮,我从该页面获得了触发事件。
实施例。我在/#,它显示数据的第1页。用户单击页面上的“下一页”链接。我显示第2页的数据,然后用/#welcome / 2替换url现在如果我点击浏览器的后退按钮,URL会变回/#但页面不会触发。如果我按下浏览器的前进按钮,URL将变回/#welcome / 2并触发页面。现在已经发生这种情况,我可以点击后退按钮,第一页将触发;我可以在第1页和第2页之间来回切换。如果用户点击“第3页”,问题就会再次发生。
如果你们都需要一个有效的例子,我会部署它,但目前这只在我的本地盒子上运行。
答案 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
负责设置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>