These are chat archives for canjs/canjs

22nd
May 2018
Jeroen Cornelissen
@jeroencornelissen
May 22 2018 08:43

Hi, does anyone know of a functionality to conditionally keep canjs from routing?
Some sort of hook before the routing event would be nice.
We want to make users confirm their routing action so they don't lose data.

@pYr0x what @nmingneau is looking for is a “before change” event on a routing DefineMap. Before the route changes we want to send an alert to the user (You have unsaved changes, continue? [Yes] [No]). Something similar like the window.onbeforeunload event, but then for a SPA. Maybe @chasenlehara or @justinbmeyer have idea’s.

Julian
@pYr0x
May 22 2018 10:51
@jeroencornelissen i mean you can create something similar like this https://github.com/donejs/bitballs/blob/master/public/app.js#L198
if the page change you can interrupt and resolve if the user applied
@chasenlehara is working on a routing guide.. maybe he has a better solution ;)
Jeroen Cornelissen
@jeroencornelissen
May 22 2018 11:43
@pYr0x The pageComponent function gets triggered after the route changes, so it’s too late, no? Or are we missing something.
Julian
@pYr0x
May 22 2018 11:50
yes, you are right...
:/
what if you using the set method on the definemap
Jeroen Cornelissen
@jeroencornelissen
May 22 2018 12:07
Ok, we will give it a try. Our routing is a bit more difficult. We’ll need 3 setters {page}/{subpage}/{itemId} to check.
Julian
@pYr0x
May 22 2018 12:22
are you on can 4?
maybe you can try the new .listenTo
Justin Meyer
@justinbmeyer
May 22 2018 14:57
@jeroencornelissen / @nmingneau @pYr0x we had a can-transaction that would allow someone to trap any mutation in this way
however, what's the scenario you want to keep something from routing? Someone clicking on a link?
What I would do is trap the clicking on the link:
<a href="{{routeUrl( page='foo' )}}" on:click=promptThenChange(scope.event, page='foo')>
promptThenChange(event, data){
  if( confirm("would you link to save first") {
    event.stopPropagation() 
    save().then(function(){   route.data.assign(data) })
  }
}
Jeroen Cornelissen
@jeroencornelissen
May 22 2018 15:01
clicking a link but also clicking the back button
Justin Meyer
@justinbmeyer
May 22 2018 15:02
the back button makes it more tricky ... b/c the URL did change ... so "state" sort of changed
What I would do is create a "shield" observable ...
Jeroen Cornelissen
@jeroencornelissen
May 22 2018 15:02
Yes, that is the tricky part :)
Julian
@pYr0x
May 22 2018 15:05
@justinbmeyer you mean can-interrupt
Jeroen Cornelissen
@jeroencornelissen
May 22 2018 15:06
How would you implement that “shield”?
Our biggest difficulty is that we have 3 routing props that can all change at the same time.
Justin Meyer
@justinbmeyer
May 22 2018 15:08
can you ask in the forums and I'll paste some code
(trying to keep this stuff searchable)
Jeroen Cornelissen
@jeroencornelissen
May 22 2018 15:09
k, will do in a few hours, I have to run now.
Justin Meyer
@justinbmeyer
May 22 2018 15:10
:-(
I'll create the forum post