These are chat archives for canjs/canjs

26th
Jul 2017
Kevin Phillips
@phillipskevin
Jul 26 2017 02:13
run npm ls can-event
and figure out why you have two versions
if everything is the latest, they should all get the same version
@MarcGodard
Roger K
@thejavascriptist
Jul 26 2017 02:19
Hi @phillipskevin ... went through some of the sample pages on the website re routing...

Tested the example from the url
https://canjs.com/doc/can-route-pushstate.html
Throws an error:
can-route.js:926 Uncaught Error: can.route.data accessed without being set
    at Function.get (can-route.js:926)
    at Compute.<anonymous> (can-route.js:902)
    at Observation.start (can-observation.js:264)
    at Compute._on (proto-compute.js:148)
    at Compute.<anonymous> (proto-compute.js:328)
    at Compute._eventSetup (can-observation.js:588)
    at Compute.prototype.addEventListener (lifecycle.js:27)
    at Function.addEventListener (can-compute.js:46)
    at Function._setup (can-route.js:828)
    at Function.ready (can-route.js:615)
The example from the url
https://canjs.com/doc/can-route.html
does not throw an exception but the route.data.on("page" ... ) or route.on("page" ... ) is never called.

    var DefineMap = require("can-define/map/map");
    var route = require("can-route");

    var AppViewModel = DefineMap.extend({
    page: "string"
    });

    var appState = new AppViewModel();
    route.data = appState;
    route('{page}', {page: 'home'});
    route.ready();

    route.data.on('page',function(ev, attr, how, newVal, oldVal) {
        console.log('route data - page', ev)
    })

    route.on('page',function(ev, attr, how, newVal, oldVal) {
        console.log('route data - page', ev)
    })
Went through the chat example on https://jsbin.com/yexezu/3/edit?html,js,output
Its not very clear how a the app would intercept the route change and proces it rather than a simple view updating itsself.
Kevin Phillips
@phillipskevin
Jul 26 2017 02:21
ok, I think there's a few different problems...
the can-route-pushstate docs look to be a little out of date
Roger K
@thejavascriptist
Jul 26 2017 02:22
ah
Kevin Phillips
@phillipskevin
Jul 26 2017 02:22
there is already an issue about listening to routes changing
canjs/can-route#78
Roger K
@thejavascriptist
Jul 26 2017 02:22
ha
Kevin Phillips
@phillipskevin
Jul 26 2017 02:23
the last part I'm not sure exactly what you mean
what kind of processing do you want to do?
intercept the route change and proces it
Roger K
@thejavascriptist
Jul 26 2017 02:23
The requirement that needs to be fulfilled is really simple:
The app must centralize the registering and any processing of a route change to a single function.
The app must accept a url pattern "/aa/{sid}/bb{mid}/cc/" or "/xx/{sid}/bb/{id}"...
There are 30+ url paths, when the location hash is changed, it must trigger a single function which validates security and calls the appropriate component/controller.
(the function may be added n number of times to route.on("sid", fnHandleRouteChange ) route.on("mid", fnHandleRouteChange ) etc... )
...
also the usage of defineMap seems to be an overkill for the purpose based on teh example in the jsbin
adding a simple route('pattern/prop', handler) multiple times should be sufficient?
Kevin Phillips
@phillipskevin
Jul 26 2017 02:25
the purpose of can-route is to bind the url to an observable map
Roger K
@thejavascriptist
Jul 26 2017 02:26
using pushstate or #! are both ok, urls looking like &aa=sid&bb=mid is not.
would an observable map be https://canjs.com/doc/can-map.html
Kevin Phillips
@phillipskevin
Jul 26 2017 02:27
yes, or DefineMap
there is an example on https://canjs.com/doc/migrate-3.html for how to listen to when any property changes
Roger K
@thejavascriptist
Jul 26 2017 02:27
it was mentioned somewhere that can-map was being deprecated so do not use it?
Kevin Phillips
@phillipskevin
Jul 26 2017 02:27
search for Remove use of change events
it's not deprecated
but it is a legacy api
DefineMap does everything can-map does, but you don't need to call .attr()
to get/set properties
Roger K
@thejavascriptist
Jul 26 2017 02:32
oic - Remove use of change events
When you upgrade to use can-define, you’ll no longer receive change events on maps.
is there a working example of a can-route-pushstate that we could test?
that would be really helpful in clearing the confusion we are having in getting it to work.
Kevin Phillips
@phillipskevin
Jul 26 2017 02:33
any of the can-route examples
only difference is if you import can-route-pushstate it will use pushstate
Roger K
@thejavascriptist
Jul 26 2017 02:34
with the ability to listen to the onChange
or hook up to listen to onchange
tried the following
The example from the url
https://canjs.com/doc/can-route.html
does not throw an exception but the route.data.on("page" ... ) or route.on("page" ... ) is never called.
Kevin Phillips
@phillipskevin
Jul 26 2017 02:35
yes, see canjs/can-route#78
or use a can-map
route.data = new CanMap();

route.data.on('change', function() { ... });
Roger K
@thejavascriptist
Jul 26 2017 02:37
got it... will test with can-map next, thank you so much... had avoided can-map because of the legacy tag.
btw: when is 4.0.0 scheduled for ?
Kevin Phillips
@phillipskevin
Jul 26 2017 02:38
we don't really give planned release dates
and since canjs is broken up into 50+ repos now, 4.0 is kind of ambiguous
Roger K
@thejavascriptist
Jul 26 2017 02:39
what is the feature set/changes in it (if the list is publicly available) also a rouch date (q3 q4)
ok.
thanks much @phillipskevin ... testing can map shortly
Kevin Phillips
@phillipskevin
Jul 26 2017 02:39
this is the epic for 4.0: canjs/canjs#3140
you can get the change event with DefineMap by serializing it
did you try that first?
var routeCompute = compute(function() {
  return route.data.serialize();
});

routeCompute.on('change', function() { ... });
Roger K
@thejavascriptist
Jul 26 2017 02:41
trying routeCompute first
Roger K
@thejavascriptist
Jul 26 2017 05:45

@phillipskevin got route.map to work... on gotcha for someone trying it out...

route.data.on('change', function() { ... });

must come before the

route.ready();
Looked into samples from api 2.x docs to get it working...
the 3.x docs need some love for first time users...
Frank Lemanschik
@frank-dspeed
Jul 26 2017 10:10
@thejavascriptist i am working on that and i can tell you at present the whole canjs documentation is based on the suggestion that you look into the Guide as first time user
if you jump over that step your missing a lot of needed infos thats only documented in the biginners guide
Frank Lemanschik
@frank-dspeed
Jul 26 2017 11:55
@phillipskevin if you got a secund can you explain why you did "removing production tests for now"?
kostya.aderiho
@kaderiho
Jul 26 2017 14:00
Hey guys, I have the next situation: I need to fire an event in parent component (click on button) and child component needs to listen this event and do smth on this. So which is the best solution for implementing this? In old canjs (2.2.0) I used viewModel.dispatch method, but not aware that it works by the same way in 3.9.0. Thanks in advance!
Kevin Phillips
@phillipskevin
Jul 26 2017 14:19
@frank-dspeed because they were breaking and I wanted to make a pre-release
I did that on the minor branch, just to be clear
@kaderiho the best way is to use data binding
click a button -> change a property on the viewModel -> pass that property to the child component
you can use https://canjs.com/doc/can-event.html, but it's a much harder pattern to write tests for
Frank Lemanschik
@frank-dspeed
Jul 26 2017 14:56
@phillipskevin ah ok tought this was done to remove the tests also for release :)
Kevin Phillips
@phillipskevin
Jul 26 2017 14:57
no, just don't want to take the time to figure out which dependency is breaking the production tests
we will fix that before anything is released
kostya.aderiho
@kaderiho
Jul 26 2017 15:04
@phillipskevin thanks man, I will try it
Roger K
@thejavascriptist
Jul 26 2017 15:45
@frank-dspeed thanks, re: the guides... A longer term ask would be to see guides which are more than samples running in jsbin. e.g. with best practices recommended by the can team etc. one example to look into is https://github.com/gothinkster/realworld This would also help people like me sell canjs to my managers and bring better awareness of canjs and donejs out.
Kevin Phillips
@phillipskevin
Jul 26 2017 15:48
that's a good suggestion
longer examples are difficult since a lot of people won't spend that much time going through them
all of the donejs guides are bigger apps though
this one in particular: https://donejs.com/bitballs.html
a lot of the newer guides are focused more on new users, and not as much on selling to CTOs, etc
but we should try to accomplish both
obviously
Yeswanth Raghav T
@tyraghav
Jul 26 2017 17:43

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 viewmodel or As seperate variable in can.component or Inside define...??
How should I declare it..??
My can.component is like this
Can.component.extend({
tag:'person',
template:can.stache("<h1>{{rollno}}<h1><h2>{{Data}}<h2>"),
viewModel:{
rollno:"111111",
Data:"111111="+mydetails.name
}});

The above one is not working
Can anyone please help me by letting me know how this could be done or can anyone please provide me the above can.component ?
I am new to can js.
Anyone please help

I am using can 2.3 version
Kevin Phillips
@phillipskevin
Jul 26 2017 17:54
it should be part of the viewModel of the component
James Atherton
@James0x57
Jul 26 2017 17:55
viewModel: {
  define: {
    Data: {
      get: function () {
        return "11111=" + this.attr("mydetails.name");
      }
    }
  },
  ...
}
Yeswanth Raghav T
@tyraghav
Jul 26 2017 18:09
The above code is giving a error mydetails is not defined
James Atherton
@James0x57
Jul 26 2017 18:15
you can add a "mydetails" property to your viewModel as well. But if you are passing it in to your person component:
<person {(mydetails)}="details"></person>
then it should be defined as whatever "details" is in the parent
Yeswanth Raghav T
@tyraghav
Jul 26 2017 18:16
I can't get you
James Atherton
@James0x57
Jul 26 2017 18:17
where are you including this code: <person {(mydetails)}="details"></person>?
Yeswanth Raghav T
@tyraghav
Jul 26 2017 18:21
In some other statche
James Atherton
@James0x57
Jul 26 2017 18:22
that other stache has a viewModel of its own, yeah?
Yeswanth Raghav T
@tyraghav
Jul 26 2017 18:23
details is a model type which is like this
No
I am invoking the other statche from a can.control.extend type
James Atherton
@James0x57
Jul 26 2017 18:26
viewModel: {
  define: {
    Data: {
      get: function () {
        return "11111=" + this.attr("mydetails.name");
      }
    },
    mydetails: {
      value: new DetailsModel()
    }
  },
  ...
}
Yeswanth Raghav T
@tyraghav
Jul 26 2017 18:41
Thank you very much
It is working great
James Atherton
@James0x57
Jul 26 2017 18:41
:beers: no problem :)
Yeswanth Raghav T
@tyraghav
Jul 26 2017 18:42
If I want to use the value of Data inside a function in view model, how can I use it..??
Kevin Phillips
@phillipskevin
Jul 26 2017 18:43
this.Data
Yeswanth Raghav T
@tyraghav
Jul 26 2017 18:49
Thank you very much guys
James Atherton
@James0x57
Jul 26 2017 18:54
it's canjs 2.3 so you should do this.attr("Data")
3.x you just do this.Data
Yeswanth Raghav T
@tyraghav
Jul 26 2017 18:55
Yes
I tried that only
Thank