How to learn more JS to understand F7 better?

[sam]

Hi there
I am deeply impressed how extensive and sophisticated this framework is. Respect to the authors!

I rarely used JS the last years and just started to dig more into it. While I made some progression the most difficult part is, I don’t know where to put functions/methods/variables inside the code. At the end of app.js, inside the script part of the components, right inside the routes, …

For example I struggled on creating an Action Sheet. The docs say
$$('.ac-1').on('click', function () {ac1.open(); });
but what works inside app.js is
$$(document).on('click', '.ac-3', function () {ac3.open(); });

I would love to get some advice from you guys. What/where should I learn to have better understanding what is going on and how Framework7 works? Would I benefit learning Vue.js? Some parts look like it, even while I am not in using f7-vue.

Hope you get what I mean

[hongfu]

1.js just runs order by script codes except defining something
2.“on” method help us to auto add event binding after el insert dom or run in hooks

[sam]

Well, thanks. But this was not a bit helpful

[nolimits4web]

the most difficult part is, I don’t know where to put functions/methods/variables inside the code. At the end of app.js, inside the script part of the components, right inside the routes

That is the good part of Framework7. You can put it in any of listed places, but of course some little understanding is required for how the each of these place works.

For example I struggled on creating an Action Sheet. The docs say
$('.ac-1').on('click', function () {ac1.open(); });
but what works inside app.js is
$(document).on('click', '.ac-3', function () {ac3.open(); });

That is about general understanding how JavaScript and DOM work.

I can recommend you the following to learn JavaScript basics:

• https://wesbos.com - tutorials from Wes Bos. I haven’t checked them but i know they are very well accepted by community
• https://javascript30.com/ - free course from same guy.
• https://www.youtube.com/playlist?list=PLVvjrrRCBy2IeK_wtxbxtwg89KWVNn2Sa - JavaScript video tutorials
• http://shop.oreilly.com/product/9780596805531.do - this book

[hongfu]

I think the key is
you’d better think you will coding for something(component) with template、data、methods、on(hooks)
the only way to control it is writing a {key：value} object as parameter,of course you can write it as function returned.
try your best forget ‘$(document)’,i think it is worst coding way personally.
you can also think sigle-file-component as a component

[sam]

Thanks for the links nolimits4web! I will check them. Have bought a JS course on Udemy too (don’t know about the quality, never used it before). Never had much interest for JS, but I really want to do more with Framework7.
hongfu, I’ll try my best