How to integrate JS.Class

[Anthony]

Hello,

This library looks very promising and I am trying to play with it, but
I'm confused about how to structure my code.

Right now I have my own object structure, like
"MyUberObject.widgets.MyWidget," which I define as functions and put
methods on the prototypes etc. Then when I want to use one of those
objects on a specific page, I do something like this:

<script>
var myObject = null;
$(document).ready(function() {
myObject = new MyUberObject.widgets.MyWidget();
});
</script>

So, I have tried converting these "classes" into JSClasses, but it
looks like you have to do everything, including calling new, on a
Class INSIDE the JS.require() call or else you will get a "undefined
is not a function" error. So I can't figure out how you're supposed to
define a class in one file and instantiate it in another, on the
document ready event.

Can someone clarify how this is supposed to be done?

[James Coglan]

On 7 December 2011 07:11, Anthony <draft...@gmail.com> wrote:

So, I have tried converting these "classes" into JSClasses, but it
looks like you have to do everything, including calling new, on a
Class INSIDE the JS.require() call or else you will get a "undefined
is not a function" error. So I can't figure out how you're supposed to
define a class in one file and instantiate it in another, on the
document ready event.

Can someone clarify how this is supposed to be done?

Several people have asked me about this, expect a blog post on how I structure projects soon.

--
James Coglan
http://jcoglan.com
+44 (0) 7771512510

[Anthony]

Are there examples somewhere? Or can you give me some quick advice? I
don't want to wait for a blog post...

On Dec 7, 2:31 am, James Coglan <jcog...@gmail.com> wrote:

[Anthony]

Hmm I seem to have gotten it to work by doing this:

$(document).ready(function() {
JS.require('JS.Class', function() {
myWidget = new MyUberObject.widget.MyWidget();
});
});

I guess because of the asynchronous loading, you have to wait for one
of the library's ready events, but is it correct to require JS.Class
in order to do this?

Thanks for the help, I'm excited to start using it. But the
documentation could benefit greatly from examples, and there is not
much out there on the web about this library. Seems odd as it looks
about 4 years old...

[James Coglan]

On 7 December 2011 13:50, Anthony <draft...@gmail.com> wrote:

Are there examples somewhere? Or can you give me some quick advice? I
don't want to wait for a blog post...

The short answer is that I have one class per file, e.g. MyUberObject.widgets.MyWidget lives in my_uber_object/widgets/my_widget.js. These files do not use JS.require(), they just declare classes.

Then I have one file called manifest.js that uses JS.Packages and autoload() to say where all my objects live and how they depend on each other. There's some cool stuff you can do here to keep the config short and well-organized, but it really need a fuller explanation.

Then in my views, I just call JS.require() with whatever widget I need at that point and instantiate it.

The important thing is to keep class definitions and other code *separate* from dependency and code-loading concerns. This keeps your codebase portable and flexible, and the manifest should let you load any piece of it wherever it's needed -- in the app, in unit tests, etc.

[James Coglan]

On 7 December 2011 13:58, Anthony <draft...@gmail.com> wrote:

Hmm I seem to have gotten it to work by doing this:

$(document).ready(function() {
 JS.require('JS.Class', function() {
   myWidget = new MyUberObject.widget.MyWidget();
 });
});

Per my previous message, the fact that MyWidget uses JS.Class should be captured in your manifest. Littering your app with dependency information is not sustainable -- you should only need to require what you're going to directly use, i.e.

JS.require('MyUberObject.widget.MyWidget', function() {
   var myWidget = new MyUberObject.widget.MyWidget();
 });

[Anthony]

Thanks a bunch. I haven't been able to get my class definitions to
work without wrapping them in JS.require('JS.Class', ...), but at
least I have several classes and modules working together now, and my
page code is JS.requiring my own class definitions.

I'm sure my code isn't quite right yet, so I am very much looking
forward to that blog post!

On Dec 7, 7:02 am, James Coglan <jcog...@gmail.com> wrote:

[Anthony]

I am very much enjoying the library. Thank you so much for writing
this... the world really needs a simple javascript class framework
like this!

Any ETA on that blog post?

[James Coglan]

On 17 December 2011 04:31, Anthony <draft...@gmail.com> wrote:

I am very much enjoying the library. Thank you so much for writing
this... the world really needs a simple javascript class framework
like this!

Any ETA on that blog post?

Sorry it took a while, but I finally got this written up -- hope it's helpful.

http://blog.jcoglan.com/2012/01/23/organizing-a-project-with-js-packages/ 

[Anthony Rowlands]

Looks fantastic. Thanks James.