These are chat archives for canjs/canjs

8th
Jan 2019
Ivo Pinheiro
@ivospinheiro
Jan 08 00:33
Opened issue canjs/can-connect#449
Justin Meyer
@justinbmeyer
Jan 08 16:36
Thanks @ivospinheiro I will try to get at it
Piyush Sharma
@Piyush5767
Jan 08 17:21
How to create redirect url in canjs

Previously we are using canv2 whereas we have recently updated our application to canv3 so i am looking a way to redirect a user to another page after he click a button.

For example in canv2 in our click function we used:
route.data.assign({
‘section’:‘merchandizing’,
‘page’:‘customers’,
‘action’: ‘edit’,
‘id’:id
});

but I am looking a way in v3, I have check can-route-pushstate it is open a page but the issue is its maintaining history and also URL in the browser does not change even it redirect to a new page
I have tried following examples but that didn’t work

route.replaceStateOnce(‘section’, ‘page’,‘action’);
route.attr( { section: “xxxxxxx”, page: ‘xxxxx’,action:‘create’ });

route.data.set({section: ‘merchandizing’,page:‘customers’,action:‘create’});

I am looking for similar way - history.pushState(’’,’’, ‘/’ + ‘xxxxxx’ + ‘/’ + ‘xxxxxxx’ + ‘/’ + ‘create’);

Chasen Le Hara
@chasenlehara
Jan 08 19:08
^ This is being discussed on the forums now: https://forums.donejs.com/t/how-to-create-redirect-url-in-canjs/1012
Piyush Sharma
@Piyush5767
Jan 08 19:09
that question is created by me
hey @chasenlehara do you know why url in browser does not change?
Chasen Le Hara
@chasenlehara
Jan 08 19:17
Can you share what all of your routing code looks like?
Similar to the code that’s at the top of https://v3.canjs.com/doc/can-route-pushstate.html
Piyush Sharma
@Piyush5767
Jan 08 19:19
var appState = new AppViewModel();
route.data = appState;
route('{section}', { section: 'dashboard'});
route('{section}/{page}', { section: 'dashboard', page: null });
route('{section}/{page}/{action}', { section: 'dashboard', page: null, action: null });
route('{section}/{page}/{action}/{id}', { section: 'dashboard', page: null, action: null, id: null });
route.start();
export default AppViewModel;
        route.replaceStateOnce('section', 'page','action');
        route.attr( { section: "merchandizing", page: 'customers',action:'create' });    
and i am calling via above one so it redirect to https://xyz.com/merchandizing/customers/create
i have also tried
        route.data.assign({
            'section':'merchandizing',
            'page':'customers', 
            'action': 'create',
        });    
but the page change where as url still remain same, url in browser does not change
Chasen Le Hara
@chasenlehara
Jan 08 19:23
Is route can-route or can-route-pushstate?
Piyush Sharma
@Piyush5767
Jan 08 19:23
i have tried can-route and also can-route-pushstate but that not working
is there is any way in canjs to use history.pushState('','', '/' + 'merchandizing' + '/' + 'customers' + '/' + 'create');
apsignifi
@apsignifi
Jan 08 19:24
@chasenlehara : are we supposed to use both can-route && can-route-pushState together all the time ?
or are they supposed to be used 'one-or-the-other' ?
@apsignifi This might interest you: https://github.com/stealjs/steal-serviceworker
Thanks, will take a look
Chasen Le Hara
@chasenlehara
Jan 08 19:26
You should import can-route-pushstate like the example at the top of this page: https://v3.canjs.com/doc/can-route-pushstate.html
var route = require("can-route-pushstate") or import route from 'can-route-pushstate', whichever syntax you’re using
Piyush Sharma
@Piyush5767
Jan 08 19:28
@chasenlehara yes i have tried to use via can-route-pushstate
Chasen Le Hara
@chasenlehara
Jan 08 19:31
Ok
If you still have the replaceStateOnce call, remove it, I don’t think that’s what you want
Piyush Sharma
@Piyush5767
Jan 08 19:32
yes, what about binding
do we use that way to update our current route and trigger the url
Chasen Le Hara
@chasenlehara
Jan 08 19:33
Yeah, you should be able to call route.attr( { section: "merchandizing", page: 'customers',action:'create' }, true); (notice the true parameter to replace the entire state)
Piyush Sharma
@Piyush5767
Jan 08 19:34
yes i tried that
Chasen Le Hara
@chasenlehara
Jan 08 19:34
After the route.attr call, what does route.attr() return?
Piyush Sharma
@Piyush5767
Jan 08 19:34
but the the issue is as i have said the page change but there is no effect on url in browser
Chasen Le Hara
@chasenlehara
Jan 08 19:36
Yes, I think I understand, I just want to make sure that’s returning the right data
Also, I’m assuming there aren’t any other warnings or errors in the console when the route is changed, is that right?
Piyush Sharma
@Piyush5767
Jan 08 19:38
ok i found if we use true then there is no effect seen
page remain same as it is and in console: {page: "customers", section: "merchandizing", [object:object]: true} appears if i console route.attr()
where as if i exclude true then it works as i have said but the issue is url remain same as it is in browser
and in console it gives correct object: {page: "customers", section: "merchandizing", action: "create"}
Chasen Le Hara
@chasenlehara
Jan 08 19:39
That [object:object]: true does not look right :/
Piyush Sharma
@Piyush5767
Jan 08 19:40
yep, {page: "customers", section: "merchandizing", [object Object]: true} i think the issue is it does not consider our third segement
it should not gives object as we already register our url having three segements
Chasen Le Hara
@chasenlehara
Jan 08 19:45
Ok, so it logs [object Object]: true when you pass the second true argument, but it logs action: "create" when you don’t?
Piyush Sharma
@Piyush5767
Jan 08 19:47
yes thats correct and i also found that even i change route.attr to some thing else like: route.attr( { section: "testing", page: 'merch' }, true); where as in console
i am getting the current url when try to check via console.log(route.attr());
i get the current url: {page: "customers", section: "merchandizing", [object Object]: true}
Chasen Le Hara
@chasenlehara
Jan 08 19:49
What does your AppViewModel look like for action?
Piyush Sharma
@Piyush5767
Jan 08 19:50
route('{section}/{page}/{action}', { section: 'xxxxx', page: null, action: null });
thats we are registering our action segement
Chasen Le Hara
@chasenlehara
Jan 08 19:51
I’m curious about how action is defined in your AppViewModel, something like action: 'string'?
Piyush Sharma
@Piyush5767
Jan 08 19:54
defining while we are registering url?
Chasen Le Hara
@chasenlehara
Jan 08 19:55
You have the line var appState = new AppViewModel();
Before that, somewhere, AppViewModel is defined
Piyush Sharma
@Piyush5767
Jan 08 19:55
ohh.. yes
action: 'string'
Chasen Le Hara
@chasenlehara
Jan 08 19:55
Ok
At this point, I’d step through the code to understand what’s going on
If you put a debugger before the route.attr to set the route, you can step into that function and see what’s going on
Stepping into that function will give you some idea of what’s happening to the object you pass in to set the data
After that, this function should get called: https://github.com/canjs/can-route/blob/v3.3.2/can-route.js#L234
Piyush Sharma
@Piyush5767
Jan 08 19:58
let me check by placing debugger
Chasen Le Hara
@chasenlehara
Jan 08 19:59
After the timeout fires, this line should be hit: https://github.com/canjs/can-route/blob/v3.3.2/can-route.js#L249
I’d step through those functions to see if the values match what you’re expecting
I have a meeting right now, but I’ll be back in just a little bit
Piyush Sharma
@Piyush5767
Jan 08 19:59
thanks!
Chasen Le Hara
@chasenlehara
Jan 08 20:30
@Piyush5767 Did you step through those functions?
Piyush Sharma
@Piyush5767
Jan 08 20:31
yes i am debugging and find that it is currently going to canReflect.setKeyValue(this, prop, value);
i think it should call this.attr.apply(this, arguments);
where as attr currently not appearing in object...
attrHelper.apply(canRoute.data,arguments); is getting the correct values where canRoute.data have the current url object and arguments having the requested url object
Piyush Sharma
@Piyush5767
Jan 08 20:38
setKeyValue unable to set the property that is the issue i think, because the this object is same after calling setKeyValue as it is before
Chasen Le Hara
@chasenlehara
Jan 08 21:18
Your AppViewModel is a DefineMap, right? It doesn’t have .attr so it shouldn’t hit this.attr.apply(this, arguments)
Piyush Sharma
@Piyush5767
Jan 08 21:21
yes thats why it goes to setKeyValue but i think it does not set the property
Chasen Le Hara
@chasenlehara
Jan 08 21:22
What are prop and value in that function?
I can see how it wouldn’t work correctly when you pass in true as the second argument
route.attr( { section: "merchandizing", page: 'customers',action:'create' }) should work though
Piyush Sharma
@Piyush5767
Jan 08 21:38
@chasenlehara prop and value is correct when we use true
in which prop value is: { section: "merchandizing", page: 'customers',action:'create' } and value: true appears
Piyush Sharma
@Piyush5767
Jan 08 21:45
@chasenlehara also i don't think onRouteDataChange function is called
Chasen Le Hara
@chasenlehara
Jan 08 22:36
Ok, that’s useful. Could you tell me what this.get() returns before and after the assignDeep call in attrHelper?
Piyush Sharma
@Piyush5767
Jan 08 23:18
it didn't go to canReflect.assignDeep(this,prop); where as canReflect.setKeyValue(this, prop, value); been called
Chasen Le Hara
@chasenlehara
Jan 08 23:27
If you don’t pass it the true second argument, I’d expect it to hit the assignDeep
Piyush Sharma
@Piyush5767
Jan 08 23:27
i am passing true in second paramater, let me try to remove that
Piyush Sharma
@Piyush5767
Jan 08 23:32
ok before: {page: "customers", section: "merchandizing"} and after: {page: "customers", section: "merchandizing", action: "create"}
if we remove true parameter then it works fine where as there is no change appears in url http://localhost/merchandizing/customers
Chasen Le Hara
@chasenlehara
Jan 08 23:39
Ok, so onRouteDataChange still isn’t called?
Piyush Sharma
@Piyush5767
Jan 08 23:41
no
even we remove true parameter it still not make call to onRouteDataChange
Chasen Le Hara
@chasenlehara
Jan 08 23:42
Correct, leave out the true parameter, it’s not useful in this case
Piyush Sharma
@Piyush5767
Jan 08 23:44
no it didn't goes to the line 870, i have set up debugger there
even it did not goes inside condition: if (!canRoute.currentBinding)
Chasen Le Hara
@chasenlehara
Jan 08 23:46
Ok, so _setup is called?
Piyush Sharma
@Piyush5767
Jan 08 23:47
no even _setup not been called
after i click button where i define: route.attr( { 'section': "merchandizing", 'page': 'customers','action':'create' });
Chasen Le Hara
@chasenlehara
Jan 08 23:48
_setup should be called when you call route.start();
Piyush Sharma
@Piyush5767
Jan 08 23:48
yes setup call in beginning
after route register and route.start() called
after pages refreshing it have been called
Chasen Le Hara
@chasenlehara
Jan 08 23:49
Ok, good
And just to double check, this line never gets called, right? https://github.com/canjs/can-route/blob/v3.3.2/can-route.js#L877
Piyush Sharma
@Piyush5767
Jan 08 23:51
it called only at beginning after page refresh but not when we call route.attr( { 'section': "merchandizing", 'page': 'customers','action':'create' });
Chasen Le Hara
@chasenlehara
Jan 08 23:51
That teardown function shouldn’t be called when the page loads. Can you put a breakpoint there and see what’s calling it?
Piyush Sharma
@Piyush5767
Jan 08 23:52
ok
no its not about teardown, i am talking about setup
Chasen Le Hara
@chasenlehara
Jan 08 23:55
Ok, so that teardown function is never called, right?
Piyush Sharma
@Piyush5767
Jan 08 23:55
there is no called made to teardown
no, not even after we call route.attr
Chasen Le Hara
@chasenlehara
Jan 08 23:59
Ok, good
After the route.attr call, do you see this function being called again? https://github.com/canjs/can-route/blob/v3.3.2/can-route.js#L958
Can you log canRoute.data.serialize() and see what it returns? It should be called before route.attr and after route.attr, so two logs.
Piyush Sharma
@Piyush5767
Jan 08 23:59
yes sure