pagerjs
pagerjs copied to clipboard
Inner hide hook(s) should execute before outer show hook(s)
top
<div data-bind="page: {id:'resource'}">
<div data-bind="page: {id:'create'}">
create
</div>
<div data-bind="page: {id:'?', nameParam: resourceId}">
resourceId
<div data-bind="page: {
id:'edit',
beforeShow: function(){console.log('beforeShow resource edit')},
afterShow: function(){console.log('afterShow resource edit')},
beforeHide: function(){console.log('beforeHide resource edit')},
afterHide: function(){console.log('afterHide resource edit')},
}">
edit
</div>
<div data-bind="page: {id:'subresource'}">
subresource
<div data-bind="page: {id:'?', nameParam: 'subresourceId'}">
subresourceId
<div data-bind="page: {
id:'edit',
beforeShow: function(){console.log('beforeShow subresource edit')},
afterShow: function(){console.log('afterShow subresource edit')},
beforeHide: function(){console.log('beforeHide subresource edit')},
afterHide: function(){console.log('afterHide subresource edit')},
}">
edit
</div>
</div>
</div>
</div>
</div>
When you navigate from
/#resource/1/subresource/1/edit
to
/#resource/1/edit
This is what the console outputs:
beforeShow subresource edit VM2048:5
afterShow subresource edit VM2048:6
beforeShow resource edit VM2042:5
afterShow resource edit VM2042:6
beforeHide subresource edit VM2048:7
afterHide subresource edit VM2048:8
Expected execution order:
beforeShow subresource edit VM2048:5
afterShow subresource edit VM2048:6
beforeHide subresource edit VM2048:7
afterHide subresource edit VM2048:8
beforeShow resource edit VM2042:5
afterShow resource edit VM2042:6
Or even something like this would be an improvement, but maybe suboptimal:
beforeShow subresource edit VM2048:5
afterShow subresource edit VM2048:6
beforeHide subresource edit VM2048:7
beforeShow resource edit VM2042:5
afterHide subresource edit VM2048:8
afterShow resource edit VM2042:6
Bigger picture: I'd like to hook into some kind of event from the inside out, because I'd like to set a boolean on the ViewModel depending on wether the user is visiting an endpoint or not. When at an endpoint (create, edit) the whole edit UI should show. When not at an endpoint then it should be hidden.
Even bigger picture: This is a workaround attempt to make #153 possible. If you can tell me a better way I'd be more than happy to take that path.