These are chat archives for canjs/canjs

25th
Jul 2017
Roger K
@thejavascriptist
Jul 25 2017 06:14
Hi All, trying out the new canjs 3.9, are there any samples for a simple can-route implementation?
tried the following
var setupRoutes = function() {

    var AppViewModel = DefineMap.extend({
        seal: false
        },{
        "/home/": {section: 'home', v: 'L1'},
        "/cart/":  {section: 'home', v: 'L2'},
        "/podcast/{id}/":  {section: 'home', v: 'L3'},
        "/podcast/":  {section: 'home', v: 'L3'},
        "/blog/{author}/story/{id}/":  {section: 'blog', sub: 'story', v: 'L4'},
        "/blog/{author}/story/":  {section: 'blog', sub: 'story', v: 'L4'},
        "/blog/{author}/":  {section: 'blog', v: 'L4'},
        "/blog/":  {section: 'blog', v: 'L4'},
        // ... 30 more url patterns.
    });
    var appState = new AppViewModel();
    route.data = appState;
    route.ready();

    route.bind('change', function() {
        console.log('route changed', arguments)
    });
};
whats the best way to setup a route change handler
have also tried
route.on('change', function(ev, attr, how, newVal, oldVal) { console.log('change', ev) })
thanks in advance
Frank Lemanschik
@frank-dspeed
Jul 25 2017 08:37
@thejavascriptist so you did not find the guides?
on the homepage?
i only ask because we want to improve the pages and it would be of high value for us if we would know if we sorted it all right
did you look on http://canjs.com ?
AntonProkofyev
@AntonProkofyev
Jul 25 2017 09:08
Hi guys,
using {{ routeUrl(personId=id, true) }} i can change my personId param in route. is it a simple way to remove this param
something like {{ routeUrl(personId=undefined, true) }}
Frank Lemanschik
@frank-dspeed
Jul 25 2017 09:49
hmmm interristing question i don't have a clear answer for it but i would be interrested in why you should want to remove that?
AntonProkofyev
@AntonProkofyev
Jul 25 2017 10:07
just didn't find in docs this information. so it was just interesting is it possible at all
Frank Lemanschik
@frank-dspeed
Jul 25 2017 10:07
it is possible but i don't can understand why this should be done
in general all is possible as javascript is about objects and that you can do anything
AntonProkofyev
@AntonProkofyev
Jul 25 2017 10:08
)
Kevin Phillips
@phillipskevin
Jul 25 2017 14:22
@thejavascriptist route.matched.on('change', ...) is what you're looking for I think
@AntonProkofyev {{ routeUrl(personId=undefined, true) }} should work. did you try it?
Roger K
@thejavascriptist
Jul 25 2017 14:35
@phillipskevin thank you, just tried the about but the event does not fire... e.g. when the url is changed from http://127.0.0.1:8081/#!/home/ to http://127.0.0.1:8081/#!/podcast/42/
var setupRoutes = function() {

    var AppViewModel = DefineMap.extend({
        seal: false
        },{
        "/home/": {section: 'home', v: 'L1'},
        "/cart/":  {section: 'cart', v: 'L2'},
        "/podcast/{id}/":  {section: 'podcast', v: 'L3'},
        "/podcast/":  {section: 'podcast', v: 'L3'},
        "/blog/{author}/story/{id}/":  {section: 'blog', sub: 'story', v: 'L4'},
        "/blog/{author}/story/":  {section: 'blog', sub: 'story', v: 'L4'},
        "/blog/{author}/":  {section: 'blog', v: 'L4'},
        "/blog/":  {section: 'blog', v: 'L4'},
        "*": { test: 'catchall'},
        // ... 30 more url patterns.
    });
    var appState = new AppViewModel();
    route.data = appState;
    route.ready();

    route.matched.on('change',function(ev, attr, how, newVal, oldVal) {
        console.log('route matched - change', ev)
    })
};
Kevin Phillips
@phillipskevin
Jul 25 2017 14:41
it doesn't look like your routes are set up correctly
Roger K
@thejavascriptist
Jul 25 2017 14:41
@frank-dspeed did scan through the guides, was looking for a sample where a user can manipulate the URL which will call the route change event to fire. e.g. user changes from https://samp.le/podcast/42/ to https://samp.le/podcast/23/ t0 https://samp.le/podcast/xbd/
for something like that (/podcast/42/ to /podcast/23/) you'll need to listen to the individual property
route.data.on('id', ...);
Frank Lemanschik
@frank-dspeed
Jul 25 2017 14:43
@thejavascriptist the user manipulates the url normal depending on if your using pushstate then he does that with /bla/bla if not he does it with mypage#!/bla/bla
kevin will help you a lot he uses the route stuff more then me
overall he knows more tips and tricks with that then me lol
Kevin Phillips
@phillipskevin
Jul 25 2017 14:45
thanks :smile:
Frank Lemanschik
@frank-dspeed
Jul 25 2017 14:45
but if you need server stuff i am the right
Roger K
@thejavascriptist
Jul 25 2017 14:46
@frank-dspeed thank you. I need server stuff too... trying to evaluate if this will work for us.
Frank Lemanschik
@frank-dspeed
Jul 25 2017 14:46
@phillipskevin its only the truth i always wonder about your answers most times i always learn new syntax
but when we talk about low latency using own chips (asic) to get reply in 0.3 nano ms
then i know more
not nano should be ms so 3 ns
Kevin Phillips
@phillipskevin
Jul 25 2017 14:50
I actually did verilog designing CPLDs for about a year early in my career :wink:
Frank Lemanschik
@frank-dspeed
Jul 25 2017 14:51
did you got the new tesla nvidia v100 ? already :)
Kevin Phillips
@phillipskevin
Jul 25 2017 14:51
haha, don't even know what it is
Frank Lemanschik
@frank-dspeed
Jul 25 2017 14:51
new mega cpu
Kevin Phillips
@phillipskevin
Jul 25 2017 14:51
oh cool
used for AI
Kevin Phillips
@phillipskevin
Jul 25 2017 14:52
but yeah, you definitely know a lot more about it than me
Frank Lemanschik
@frank-dspeed
Jul 25 2017 14:52
i am and illon musk did a lot of research with it
now we work on specs about regulations because we found out
terminator could get reality in next 2 years
“Once there is awareness, people will be extremely afraid, as they should be.” is the key sentence
now the most complicated issue is how to block inovation and thinking of such AI's and stop people from using them in the wrong way :)
so earth don't gets destroyed
Frank Lemanschik
@frank-dspeed
Jul 25 2017 14:57
the interristing is there is no deep learning algo at present that don't results in killing human is a good improvment :)
but we have the luck that next years only the military industry and fun industry will grow and they will not use such stuff in that way that it is risky
Türkei is starting declaring war on germany :)
and so on so we will have all enought to do with the ww3
Roger K
@thejavascriptist
Jul 25 2017 15:03

@phillipskevin thank you will look into https://canjs.com/doc/guides/chat.html#Routebetweentwopages

Are there any samples using route or push state with more complex url patterns?
The api docs for route always had !#type=videos&id=5, but am looking for #!/videos/5/

Frank Lemanschik
@frank-dspeed
Jul 25 2017 15:04
Gregg Roemhildt
@roemhildtg
Jul 25 2017 16:51
can i add new routes to can-route after calling route.ready?
Frank Lemanschik
@frank-dspeed
Jul 25 2017 16:57
i don't know i never used route ready but what i did is i used defineMap to define routes
and if you do that with seal false
then you should be able to add and remove routes in it
:)
but i wouldn't do something like a session based route in general
or why do you think of that?
i don't know about the route.ready call i never needed to call that for my routes to work
Kevin Phillips
@phillipskevin
Jul 25 2017 17:00
it's called automatically by done-autorender
I'm not sure if you can call route.ready twice @roemhildtg
you can certainly try
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:01
and report back results as i am interrested in that too
Kevin Phillips
@phillipskevin
Jul 25 2017 17:01
I'm curious what the use-case is though
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:01
i know it its about temp urls
that should be exist for a time frame
its a concept on server side often
Kevin Phillips
@phillipskevin
Jul 25 2017 17:02
how are you dynamically rendering though?
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:02
its more about offering a download or something on that url for a temp time
or offer a video for a timeframe on conditions
for example we use such stuff on youporn.com for our stream proxys
but serverside not clientside
Kevin Phillips
@phillipskevin
Jul 25 2017 17:03
ok, but client side you would need some javascript that handles that route
that's what I'm curious about
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:04
i am also i never tought client side thats why i have often problems with this concepts
its not logic for me that i can't simply do what i want to do
:D
but ya i understand the point that it is maybe not usefull client side
:D
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:06
ok, I'll give it a go, see what happens.
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:08
@roemhildtg can you tell us what the exact usecase is
the exact goal?
what kind of temp url are you generating?
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:10
I've got an app that loads a page, so like /page/{name}, and on some pages, I want to have "subpages" i guess, so like /page/{name}/object/{id}But I don't really want the parent app to knoww about the sub pages apps and routes
so each sub page can configure it's own route
looks like it works to call it again
route.ready
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:11
ok so your main goal is indipendent route models
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:11
yeah
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:11
i am not sure if that is possible
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:11
like nested routes
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:12
yes i understand but i am not really sure if they will not share some stuff in general
i need to think more deep about that
Kevin Phillips
@phillipskevin
Jul 25 2017 17:12
I would probably just try to use a consistent pattern
since a single map will back your route data, there's no way to make them truly independent
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:13
ya but anything that uses can-route
will at some point be aware of all routes right?
you can't register indipendent instances of can-route and can-route-pushstate
that care for individual parts of the url
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:15
that's true, they won't be independent, but as long as I use different variable names it will "work" at a basic level
I think
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:16
not really i think but you need to think some server side also
if your vars come from a server
your client has only a set of vars
and only that
if you dynamic generate that often enought no one could hijack that
without knowing your algo for renew the vars
but i think in general route is something that is handled globaly only once
in the client i mean globaly
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:18
okay
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:18
it has a global state about the current entered browser url
and all routes need to be inserted into can route
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:18
I guess I was hoping to achieve something like how django uses urls.
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:18
even if you change that dynamic a sub component can read the aviable routes
django is serverside
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:19
right, so maybe I'm thinking wrongly about this
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:19
you can archive that with a client server combination your 100% right
but not inside of a single page app
because thats why they called single page
Kevin Phillips
@phillipskevin
Jul 25 2017 17:20
it sounds like it is working for you, right, @roemhildtg ?
calling route.ready twice gives you what you want
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:20
yes that works @phillipskevin
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:20
I think so
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:21
the final way to archive what you want is to return diffrent versions of your single page app dynamicly from the server
Kevin Phillips
@phillipskevin
Jul 25 2017 17:21
so... not use a single page app?
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:22
@phillipskevin not really its a mix
a individual singlepage app
:D
but still at some point a single page app
with point a url is meand
Kevin Phillips
@phillipskevin
Jul 25 2017 17:23
@roemhildtg I would say to just stick with calling route.ready twice and be aware that you might have some slight performance degradation as the app starts up
and you might run into some edge cases we haven't planned for
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:24
I'll keep that in mind
Kevin Phillips
@phillipskevin
Jul 25 2017 17:24
since this isn't really how we intended can-route to be used
but if you run into that kind of stuff, feel free to submit issues as proposals
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:24
@phillipskevin did you ever try to use can-route from a folder?
Kevin Phillips
@phillipskevin
Jul 25 2017 17:24
we've built multi-page apps, yeah
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:25
like i serve my pages from https://host/bla/foo/singlepage/<can-route>
Kevin Phillips
@phillipskevin
Jul 25 2017 17:25
yeah
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:25
ok then he will have no problems
:D
Kevin Phillips
@phillipskevin
Jul 25 2017 17:26
rearchitecting the whole app isn't the solution
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:27
The whole reason this came up is I have one canjs app that uses can-route, and another that also uses can route, and I wanted to combine them to be able to click back and fourth without losing state
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:28
how much state do you need to transfer
can you tell me a data example?
you could use many technics to do that i know a lot about state :)
if it is only like 3 vars or that you can simply use pushstate like you was thinking befor and call the right urls for both apps
if its more state you should think about a db backend
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:29
in app one, I just need /{modelName}/{page}/{objectId} and in the second app, its a mapping app so /{xCoord}/{yCoord}/{zoomLevel}
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:29
if its middel state you can even use localstorage or something like that
so you need 6 values right?
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:30
yup, 3 for each
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:30
to jump back and for
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:30
yup
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:30
use localStorage
thats the most nativ fast way
Kevin Phillips
@phillipskevin
Jul 25 2017 17:30
I would just abstract it to like {page}/{section}/{subsection} or something
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:30
the app still needs to reload though, so your saying load the app js from local storage?
Kevin Phillips
@phillipskevin
Jul 25 2017 17:31
and hook it up to the correct fields on your smaller apps
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:31
@phillipskevin okay, that sounds feasible
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:32
@phillipskevin that means loading one app that inhirts the 2 smaller once so no reload?
i tought we are talking about 2 indipendent apps
Kevin Phillips
@phillipskevin
Jul 25 2017 17:33
yeah... put a viewmodel that handles the routing at the root
and route between the 2 apps
2 apps becomes 1 app
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:34
hmm ya that is logical that this would work in general if its possible to do so if the both apps are indipendent and he don't controlls the environment then he needs to use local storage
but when service workers are landing ;)
this will speed up a lot
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:34
yeah, service workers look really interesting
donejs + service workers :)
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:35
is already worked on
i think when i get hangouts working and my face shaved maybe next week
:D
donejs/donejs#997
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:38
@phillipskevin do you know of any examples of the viewmodel that would route between two apps?
Kevin Phillips
@phillipskevin
Jul 25 2017 17:38
no, not really
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:38
@roemhildtg it gets one app
with his advice
there can't be routing between 2 apps
Kevin Phillips
@phillipskevin
Jul 25 2017 17:39
basically... turn each of your apps into a component
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:39
That's what I was thinking, that makes sense
Kevin Phillips
@phillipskevin
Jul 25 2017 17:39
if they already have viewModels, it shouldn't be too much work to add a component
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:40
i had this issue also often but i don't found a solution between app component converting
or maybe offering a component one time as app and as component
:D
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:40
Yeah, it shouldn't be too hard.
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:44
donejs/donejs#1000 just came up with this
maybe justin and kevin and the others have some ideas about that
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:50
I like that. I think its especially relevent in donejs since donjs runs on the server. I am curious though, like what is the currently recommended approach for multiple donejs apps? Like if I want a chat app, and a place my order app? Do I need to run two instances of donejs, or is the idea we're talking about (app component) already the typical approach?
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:51
at present today you would need to run both indipendent and run some kind of proxy in front of them
or recode that 2 apps to be used as components by a 3t app that runs via done-serve
Kevin Phillips
@phillipskevin
Jul 25 2017 17:52
I'm not sure anyone has tackled this question
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:52
i have
at present i coding something for a location that shares some apps on diffrent clients
because i don't wanted to double the code
i have for example a user manager app and diffrent terminal apps that show this users
and they are sharing views
Kevin Phillips
@phillipskevin
Jul 25 2017 17:54
with donejs?
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:54
yes
sure
what else ?
:D
i have round about 7 types of apps
in this location
its even using coin detectors and bank notereaders
with donejs coded drivers for them that announce coin insertion via websockets
:D
Kevin Phillips
@phillipskevin
Jul 25 2017 17:56
ok, cool
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:56
ya but the issue is still that i can't run components as apps
:D
and so can't really well test the components
without a extra test app for each component
after that i can use the components individual combined on the diffrent terminals in diffrent rooms
but it gets more complex if one terminal for example shares 4 apps
and so on
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:58
slightly off topic, but relevent, can stealjs load files from a different app directory? for instance, can if I try to set up my apps in different folders, can I have my parent app access those files directories?
www
-------  app1
-------  app2
------- parentApp --> needs to access components in app1 and app2
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:59
hmmm
yes it can
Gregg Roemhildt
@roemhildtg
Jul 25 2017 17:59
or would parentApp need app1 and app2 in npm
Frank Lemanschik
@frank-dspeed
Jul 25 2017 17:59
depends on the state of the shared component
Kevin Phillips
@phillipskevin
Jul 25 2017 18:00
Frank Lemanschik
@frank-dspeed
Jul 25 2017 18:00
if the component needs no state from the main app1 for running in app2 sure
its the same like coding a component and installing it global as a plugin
thats what i do for my shared components
i code them as donejs plugin
install them global and link them local
local means to both apps that use them
Gregg Roemhildt
@roemhildtg
Jul 25 2017 18:01
yeah I think I know what you mean
Frank Lemanschik
@frank-dspeed
Jul 25 2017 18:04
if you then do the routes in a routes.js that only exports a canDefine map
you can import them in a new main app as combined route model
to use with your new apps can-route
Gregg Roemhildt
@roemhildtg
Jul 25 2017 18:08
So, I saw ~your~ post earlier :point_up: July 25, 2017 9:35 AM but I've never seen routing done that way, I thought you just call route('/page/...');
sorry, not your post, but that one with the routes in the define map
Kevin Phillips
@phillipskevin
Jul 25 2017 18:09
that doesn't work
@roemhildtg
thats the most big routing example that i know from can'js
so you need to add all values flat on the viewModel not nested
Gregg Roemhildt
@roemhildtg
Jul 25 2017 18:19
That's helpful. I'm getting a better idea of how this should look
Frank Lemanschik
@frank-dspeed
Jul 25 2017 18:20
your running exactly into what i was running in befor i understood that :)
Yeswanth Raghav T
@tyraghav
Jul 25 2017 19:30

Hi All
I have a can.component element with tag person

<person {(mydetails)}="details"></person>
Where details is a can.model type
Where should I declare mydetails model in can.component in order to get the values of details to mydetails..??
In view model or As seperate variable in can.component or Inside define...??
How should I declare it..??
Anyone please help

Kevin Phillips
@phillipskevin
Jul 25 2017 19:35
I would declare it in your viewmodel
look at how the messagesPromise is set up
Yeswanth Raghav T
@tyraghav
Jul 25 2017 19:38
Ok
Thank you
Yeswanth Raghav T
@tyraghav
Jul 25 2017 20:02
That example has no statement similar to one I mentioned above
Please help me with some other example
Frank Lemanschik
@frank-dspeed
Jul 25 2017 20:04
assign it on the ViewModel right
or code a function that returns mydetails
Kevin Phillips
@phillipskevin
Jul 25 2017 20:05
<person {(mydetails)}="messagesPromise.value"></person>
is how you would use that viewModel setup in your example
https://canjs.com/doc/guides/todomvc.html#Listtodos is an example where the value is passed to a component
Marc Godard
@MarcGodard
Jul 25 2017 23:27
Hello... Can someone help me with You can't have two versions of can-event/batch/batch, check your dependencies error?