These are chat archives for canjs/canjs

19th
Jun 2018
Hamelina
@Hamelina
Jun 19 2018 08:45
hello every one !
I am starting with can js and therefore I am following this tutorial : https://canjs.com/doc/guides/setup.html
I intalled can js via npm and using Steal JS. ACTually the page opens, but there is no "Hello world" diplayed. I am wondering why.
Did it happen to someone else ? thanks in advance :)
Justin Meyer
@justinbmeyer
Jun 19 2018 10:40
@Hamelina do you see any errors?
Justin Meyer
@justinbmeyer
Jun 19 2018 10:46
@nriesco I'm glad that was helpful!
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jun 19 2018 10:55
Good morning @justinbmeyer , between bitballs and bitcentive I saw different ways of handling page components for high level architecture, which one do you prefer or advice for an administration dashboard app?
Justin Meyer
@justinbmeyer
Jun 19 2018 10:58
For larger apps, I prefer bitballs approach. And it should be more simple in CanJS 4.3 with canjs/canjs#4030 complete by @chasenlehara hopefully this week.
I like bitballs b/c it is more testable
I can set properties on the AppVM and see what page should be rendered
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jun 19 2018 11:00
Good points thank you
Justin Meyer
@justinbmeyer
Jun 19 2018 11:00
One other thing that we are going to start encouraging (that currently isn't) is hooking up route.data to an observable within the AppVM instead of the AppVM directly.
AppVM = DefineMap.extend({
    routeData: {default: ()=> new DefineMap({},false)},

    init() {
        route.data = this.routeData;
        route.start();
    },
Julian
@pYr0x
Jun 19 2018 11:01
what is the benefit of doing this?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jun 19 2018 11:01
What's the benefit? avoid tight coupling?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jun 19 2018 11:07
I'm starting a green field project and I will put it to work
Justin Meyer
@justinbmeyer
Jun 19 2018 11:28
The benefit is that people get confused about the serialization and updating rules of can-route
they often have other stateful properties, and these are removed unless you have serialize: false
moving the route data into a "side-object" like this avoids that confusion ... all of the data connected to the url is in one place
Hamelina
@Hamelina
Jun 19 2018 12:01
@justinbmeyer I don't see any error :/ I alsowanted to ask how do you link the html file with the js file ? (sorry, I am a real beginner .p )
Justin Meyer
@justinbmeyer
Jun 19 2018 12:10
@Hamelina error in the console of the browser's developer tools?
Your index.html should look like:
<!doctype html>
<title>CanJS and StealJS</title>
<script src="./node_modules/steal/steal.js"></script>
<my-app></my-app>
that <script> tag loads steal.js. Steal will load your index.js file (which is the main of the package.json -> "main": "index.js",)
btw, @Hamelina , you are already more than a beginner if you are wise enough to ask for help :-)
Hamelina
@Hamelina
Jun 19 2018 12:25
yes, it looks exactly like this
I don't know if it linked to that (but it's the only thing I made different) : I installed can-component and http-server before doing : npm init -y . But still I changed the package.json file
And I did it with and existing project
  • with an
Justin Meyer
@justinbmeyer
Jun 19 2018 13:33
if you look at the network tab, what do you see?
image.png
@Hamelina
Hamelina
@Hamelina
Jun 19 2018 14:06
I use Atom, I am lost
I created a new project and it works. I don't understand why it doesn't works with the other other one.
Kevin Phillips
@phillipskevin
Jun 19 2018 15:56
The Network tab is in Chrome's developer tools @Hamelina
The developer tools Console tab is also where you should look for errors
srikkanthsiki
@srikkanthsiki
Jun 19 2018 17:49
hi

(node:49131) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 46)
(node:49131) UnhandledPromiseRejectionWarning: file:/Project/Kosmos/trouper/trouper/node_modules/jquery/dist/jquery.js:906
var div = document.createElement("div");
^

TypeError: Cannot read property 'createElement' of undefined
at assert (file:/Project/Kosmos/trouper/trouper/node_modules/jquery/dist/jquery.js:906:21)
at file:/Project/Kosmos/trouper/trouper/node_modules/jquery/dist/jquery.js:2628:24
at file:/Project/Kosmos/trouper/trouper/node_modules/jquery/dist/jquery.js:2679:3
at file:/Project/Kosmos/trouper/trouper/node_modules/jquery/dist/jquery.js:34:3
at file:/Project/Kosmos/trouper/trouper/node_modules/jquery/dist/jquery.js:38:2
at Script.runInThisContext (vm.js:91:20)

Justin Meyer
@justinbmeyer
Jun 19 2018 19:13
@srikkanthsiki which version of jQuery are you using?
and of steal?
srikkanthsiki
@srikkanthsiki
Jun 19 2018 20:13
hi
@justinbmeyer chesen from stealjs gitter is helping me with this