CODEWITHSUNDEEP
javascriptknockout.jspagerjs
Michael Lindfors
Michael Lindfors

Reputation: 87

Pagerjs not updating withOnShow after first visit

I'm using Pager.js and withOnShow to dynamicly fetch the correct data with a wildcard. It works the first time you visit the page but if you navigate to a new id, the correct viewModel is returned but the bindings are not updated.

Html:

<div data-bind="page: {id: 'start'}">
    <a href=""  data-bind="page-href: '/11'">id 11</a>
    <a href=""  data-bind="page-href: '/12'">id 12</a>
</div>
<div data-bind="page: {id: '?', withOnShow: showView}">
    <h1 data-bind="text:id"></h1>
    <a href=""  data-bind="page-href: '/11'">id 11</a>
    <a href=""  data-bind="page-href: '/12'">id 12</a>
</div>

JS

vm = ko.mapping.fromJS({test: 1});
vm.showView = function(callback, page) {
    console.log(page.currentId);
    vm = ko.mapping.fromJS({id: page.currentId});
    callback(vm);
};
pager.useHTML5history = true;
pager.Href5.history = History;
pager.extendWithPage(vm);
ko.applyBindings(vm);
pager.startHistoryJs();

jsFiddle: http://jsfiddle.net/xU4Uu/

Try navigating to one of the links and then use the new links to navigate to the other id. Console logs show the correct id returned but the h1 is not updated.

Am I using this wrong or is this a bug in pager.js? I'm in the middle of a project and I really need to get this to work. Has anyone solved this some how?

Upvotes: 3

Views: 800

Answers (1)

Rango
Rango

Reputation: 3907

Your code recreates viewmodel every time .showView is called. You should not recreate viewmodel but only update its properties.

Change:

vm = ko.mapping.fromJS({id: page.currentId});

to:

ko.mapping.fromJS({id: page.currentId}, vm);

Using ko.mapping.fromJS with VM as second parameter will update VM members with new values (passed with the first parameter respectively).

Corrected fiddle: http://jsfiddle.net/xU4Uu/1/

Upvotes: 1

Related Questions