canjs/canjs - Gitter

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?

@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