These are chat archives for canjs/canjs

6th
Jan 2016
Kevin Phillips
@phillipskevin
Jan 06 2016 00:13
sorry, you would define the routes also
with the normal can.route(…)
and you’d have to add the case for faq in the set() function
richardudovich
@richardudovich
Jan 06 2016 00:16
i dont know why... but this confuses me
is there any way that you can whip up a really simple fiddlejs
that would really be appreciated
Kevin Phillips
@phillipskevin
Jan 06 2016 00:17
yeah, except it’s hard to see the URLs
richardudovich
@richardudovich
Jan 06 2016 00:17
it can just be 2 urls
/product/123 and product/faq that show different divs
Kevin Phillips
@phillipskevin
Jan 06 2016 00:18
I just mean in jsbin, you won’t see the URL
since it’s running in an iframe
it doesn’t change the actual URL of the browser
richardudovich
@richardudovich
Jan 06 2016 00:18
i yeah thats fine...
even without the urls changing it would be a start
dylanrtt
@dylanrtt
Jan 06 2016 00:24

One way would be to keep the route generic:

can.route(':page/:action');

and handle the logic in the template:

{{#eq page 'products'}}
  {{#eq action 'faq'}}
    <product-faq></product-faq>
  {{else}}
    <product-instance {product-id}="action"></product-instance>
  {{/eq}}
{{/eq}}
Kevin Phillips
@phillipskevin
Jan 06 2016 00:35
not sure if this answers your question, but here’s a jsbin: http://jsbin.com/rodihazige/1/edit?js,console,output
@richardudovich
or maybe this is a simpler way of doing it: http://jsbin.com/wukoporudi/1/edit?html,js,output @richardudovich
richardudovich
@richardudovich
Jan 06 2016 00:41
yeah thanks
i kind of get it
so if i want to listen to changes in the application map in the controller i would have to bind to one or more of its attributes?
Kevin Phillips
@phillipskevin
Jan 06 2016 00:43
you can bind to a change in appState, yes, or you can use can.route.bind to bind to a change in the route
richardudovich
@richardudovich
Jan 06 2016 00:43
also, if i understand correctly.... once the route is matched its up to the map to validate and set its state based on route data... , see in some situations there are likely to be multiple matches and the logic for handling them would then have to be done in the actual map as well.... is that right? .... so you wouldn't be able to have multiple routes... and have only one of them match based on parameter regex... or something like that....
Kevin Phillips
@phillipskevin
Jan 06 2016 00:44
or, the way we normally do it, is by passing the appState into each of our components using two-way binding and updating the viewModel of the components
the map is just going to be two-way bound to the route, so if anything changes on the route, it changes on the map, and vice versa
all of the route matching is based on the can.route('...') calls that define the possible routes
how would you have multiple matches?
richardudovich
@richardudovich
Jan 06 2016 00:46
yeah... but look... you can have /:foo and /:boo .... where say boo has to be at least 10 chars long... , it would be ideal if you can set that as a rule.... so that when i call /whatdahellisthis.... it is in fact boo that would be set....
dylanrtt
@dylanrtt
Jan 06 2016 00:46
@richardudovich Your original question reminds me of server side MVC where you would typically map a route to a controller action, but it's a little bit different here because you are going to map a route to the state. You then decide what you are going to show by inspecting the state in the application's main controller or component. You can still have the same regex logic or whatever you want, it's just further down or within the app state itself by using the define plugin.
Kevin Phillips
@phillipskevin
Jan 06 2016 00:48
@richardudovich if you can’t avoid doing that, then yes, you could use the map to define that behavior
but I would probably just have a single route for that
and then use the define plugin to define boo and foo
richardudovich
@richardudovich
Jan 06 2016 00:49
yeah... you can... so... in the map for setting foo you would validate its length... and if its 10+ chars you would actually set boo instead
yep...
but I would probably just have a single route for that
and then use the define plugin to define boo and foo >>> thats exactly how i see it as well
at least i get the concept :)
i dont know... this an interesting approach... but i still think im gonna give crossroadsjs a go... and see if i can integrate into canjs
Kevin Phillips
@phillipskevin
Jan 06 2016 00:51
var AppState = can.Map.extend({
  define: {
    fooOrBoo: {
      type: ’string'
    },
    foo: {
     type: ‘boolean’,
     get: function() {
         return this.attr(‘fooOrBoo.length’) <= 10;
      }
    },
    boo: {
     type: ‘boolean’,
     get: function() {
         return this.attr(‘fooOrBoo.length’) > 10;
      }
    }
  }
});
ok, I’ve never used crossroadsjs, but it should definitely be possible to integrate with CanJS
Kevin Phillips
@phillipskevin
Jan 06 2016 00:56
in case you’re still curious, this is a good explanation of how we normally set up routing and components: http://donejs.com/Guide.html#section=section_Routingandcomponents
it doesn’t have route validation like you’re talking about, but it’s a good example otherwise
richardudovich
@richardudovich
Jan 06 2016 01:00
theoretically i could use both approaches
with crossroadsjs validating the route... and then canjs taking over once i know which route to set...
:/
richardudovich
@richardudovich
Jan 06 2016 01:09
what are your guys thoughts on combining the 2
Julian
@pYr0x
Jan 06 2016 01:10
@justinbmeyer can you create a donejs-vagrant repo. i can upload the config files for setting up a vagrant box
dylanrtt
@dylanrtt
Jan 06 2016 01:17
@richardudovich I can see the value in adding this type of thing to the route layer. Using the define plugin for this feels kind of ugly and has limitations if you are doing anything complicated.
richardudovich
@richardudovich
Jan 06 2016 01:18
cool... , ill give it a go :)
dylanrtt
@dylanrtt
Jan 06 2016 01:43

I like the idea of having more flexibility on how a url is mapped to the state but sometimes it may add little to no value. Here's an example of something you could probably do:


var AppState = can.Map.extend({}),
    appState = new AppState();

// alphabetic route
crossroads.addRoute(/^\/products\/([a-z]+)$/, function(subPage){
  appState.attr({
    page: 'products',
    subPage: subPage
  }, true);
});

// numeric route
crossroads.addRoute(/^\/products\/([0-9]+)$/, function(id){
  appState.attr({
    page: 'products',
    productId: id
  }, true);
});

but you would still need to have some code at the app layer to determine what to show. You would also have to add logic for persisting state that is not present in the URL, whereas can.route already persists that automatically.

richardudovich
@richardudovich
Jan 06 2016 01:56
the thing is... this is a bit of a legacy app... and most routes are done in the way of "pattern route": function() { handle everything here... and render what needs to be rendered... }
so... the app is more bound the route then the application state... if that makes sense
richardudovich
@richardudovich
Jan 06 2016 02:02
in any case... the example you provided above does add value ... doesnt it?
lol
dylanrtt
@dylanrtt
Jan 06 2016 02:04
well it could just be simpler/easier to handle that elsewhere (the template) and keep the existing features of can.route
richardudovich
@richardudovich
Jan 06 2016 02:05
theres propably the bigger question in play... do i refactor my whole app to be based of state rather then route->function mappings
or do i add the crossroads to handle specific routes... and leave the current route->function mapping for the rest of the legacy stuff
dylanrtt
@dylanrtt
Jan 06 2016 02:06

I guess my angle is more of approaching a new app.
My example is almost like doing this:

crossroads.addRoute(/^\/products\/([0-9]+)$/, function(id){
  appState.attr({
    controller: 'products',
    action: 'view',
    id: id
  }, true);
});

which might be helpful for a legacy app structured like that

richardudovich
@richardudovich
Jan 06 2016 02:07
yep... im leaving towards that tooo
leaning
Kevin Phillips
@phillipskevin
Jan 06 2016 02:09
I wouldn’t refactor the entire app unless (a) it makes the code more maintainable/testable and (b) you have the time and tolerance for regressions
assuming this is a production app and not something you feel like rewriting for fun
richardudovich
@richardudovich
Jan 06 2016 02:15
ohh hell no
lol
so propably... where i need to have routes with requirements ill just use crossroads
Kevin Phillips
@phillipskevin
Jan 06 2016 02:18
cool, let us know how it went once you get it working
richardudovich
@richardudovich
Jan 06 2016 02:18
ohh... lol well it will definately work... , im just gonna have to swallow my pride and deal with the uglyness of different types of route implementaitons :)
Kevin Phillips
@phillipskevin
Jan 06 2016 02:23
could you not just do all of it with crossroads?
richardudovich
@richardudovich
Jan 06 2016 02:27
yeah... but i got 100+ routes to change...
richardudovich
@richardudovich
Jan 06 2016 12:36
hey guys, whats the difference between canjs and donejs and also how does it compare to reactjs?
Julian
@pYr0x
Jan 06 2016 12:37
@richardudovich donejs is a framework which combined canjs / testing with qunit and funcunit
and building with steal
reactjs is only a view layer
there is also a plugin for donejs
richardudovich
@richardudovich
Jan 06 2016 12:39
got ya
Justin Meyer
@justinbmeyer
Jan 06 2016 15:17
@dylanrtt so that form of routing has some expressive advantageous, but you lose the two way routing.
I've been thinking of an alternate to control/route
if you have ideas, please create an issue
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 06 2016 16:10
sounds like is a must have meeting for canjs devs :D
Julian
@pYr0x
Jan 06 2016 16:11
;)