Just
Just is a fast, small, thoughtfully written javascript MVC Framework. It's has 3 main goals.
- To be everything you need.
- To solve common problems and pitfalls that large and small apps have.
- To be easy to write.
Documentation
- J
- J.extends`
- "Static" Methods
- The Blueprint
- Getting and Setting properties
- super
- The Mapper
- Data Binding
- Templating Engine
- Views
- Models
- Events
- App
Just has 0 dependecies. IE >= 9 is supported. JQuery is not required to use Just. However if you happen to be using JQuery (if the JQuery object is available), Just will use it to support browsers < IE 9. Bottom line: Just add JQuery for <=IE8.
J
- Main
J
Object which contains static methods.
J.extends`
- Create inheritance easily:
J.extends(Superclass, Class def (optional))
Example:
var TinyModel = J;
You can read this as TinyModel
will extend or inherit from MiniModel
.
When creating a class definition you can create a constructor with an init
method as in the the previous example.
You can create an instance of the previous class like so:
tm = ;tm;tm;
You can also add instance methods using the prototype method as you normally would.
var TinyModel = J; TinyModelprototype { console} tm = ;
"Static" Methods
You can create static methods by capitalizing the name of the method you create.
var TinyModel = J; tm = ;console;
The Blueprint
Everything in J
extends from the Blueprint
object.
Getting and Setting properties
You can initialize Blueprint
with getters and setters.
var blueprint = J;
The Blueprint
object/class gives everything that inherits it the ability to get
and set
properties. Those properties can then be watched for changes.
//inherit from the Blueprintvar SomeModel = J; //create a new Some Modelvar sm = ; //Listen for changes to properties of some modelsm { console}console; // undefinedsm // sm change key: name sm changed to: Johnconsole; // Johnsm // sm change key: name sm changed to: frankconsole; // Frank
You can create read only properties by creating a property starting with an underscore. This will create the properties sans underscore as a getter only.
var Blue = J;var blue = ; console;// John 25 0 blue; blue; blue; blue; blue;// Object {name: "Jeff", age: 30, i: 0, winner: false} console;// Jeff 30 0 false
_super
When you inherit from Blueprint
you will have a _super
method avaiable to you. You can use it to call the parent class method and override your own. Here is a basic implementation.
var container = document2;var View = J;
this._super
takes the SuperClass
as the first parameter. The name of the function as a string as the second parameter and the parameters you want to pass to said function as an array. In this example we are passing just one parameter to the super call. Then we can call render
on our instance of our custom View
class
var view = app; view;
See more on template rendering below.
The Mapper
You can use the Mapper
class to get back a single instance of your model, or a new instance of your model. Make sure to create a single instance of a new Mapper
with something like this:
var mapper = J;
Then you add models to it with two methods mapAModel
which will always return the same instance of a model. The mapper will instantiate it for you. You also have mapModel
which will also instantiate a new model everytime you grab the model back. You can retrieve models with getAModel
and getModel
.
var mapper = J;var SomeModel = J;mapper;var oneModel = mapper; //give it a name. Mapping "some" model.oneModel;console; // returns Johnvar sameModel = mapper; // get that same instance on a new variable. console // returns John. We are dealing with the same instance as before.
Data Binding
You can setup to have data binding between different fields. Initialize a view with a el
and setup your template and bindings.
var view = J;
This will bind the name
property to the keyup
of #name-input
.
In your HTML you can setup an element to receive that data like so:
Using data-j-bindable
means that anything that is populating a name property will appear in that div.
Templating Engine
You can create dynamic templates in HTML. You can use your own templating engine as well but to use the built in one just create a template file. For example templates/hello.html
<!-- somefile.html -->*/list\**\list/* */item\* A dog named {name.first} {name.middle.full|capitalize} {name.last|capitalize} {name.quote|titleize} AKA: {name.nickname|camelCase}*\item/*
You can tell Just where to find your templates.
J;var app = J;appconfig = root: "http://localhost:3000" templates: "http://localhost:3000/templates";
With this info in hand Just will make a url request for your templates, but only when you render. You tell Just which template on the page you want to grab. */templatename\*
refers to the template name and wrap the end with *\templatename/*
. You can then grab the template like so
var container = document2;var View = J;var view = app;
Notice that our view can grab variables. You can wrap the variable with a single curly brace to add a variable in there.
We also added a filter to our variable using the pipe |
. There are a few included filters. You can add your own very easily.
J;
Views
You can create a view and link it to a main element. When rendering you can render in context of a child of that view or for the whole view. There is a couple of typical MVC issues with Views
that we have solved. See Mediators
below.
var view = J;
Models
Blueprint
and Model
are similar but Model
is meant for being the M in MVC. You can set all of it's properties at creation time. You can do this for the model and when creating the model through the Mapper
.
var mapper = J;var mainModel = mapper;mainModelmainModel var otherModel = J;
Models also have a toJSON()
method and toObject()
method.
var otherModel = J;J;J;
We also have a convenience method you'll notice from the last example J.l
which pipes directly to console.log
. It's just easier to type.
Events
We have cross browser events available and you would (but won't have to see App
below) create 1 event class/object for app wide event triggering and listening.
// New instance of Events class.var events = J; // Subscribeevents;// Triggerevents;
App
You shouldn't need to create the Event
on your own. It is included with your app object as well as other App
nessesities. Here is a refactored version of the previous example using the App object for event delegation.
var App = J; // SubscribeAppevents;// TriggerAppevents;
You can set config values on your App
.
J;var app = J;appconfig = root: "http://localhost:3000" templates: "http://localhost:3000/templates";
Mediator
The Mediator (sometimes called the controller) is listening on behalf of the view and communicates with Models. The view in MVC is supposed to only be dealing with display information. If that's true then we don't do any logic for the view on the view. The problem in typical javascript MVC frameworks is that it is hard to tell the difference between the HTML view and the javascript view. Well in Just, we have solved that. You'll typically have one of two situations:
- You have your HTML written already and you just need to listen for events (buttons to be click, and text to be typed).
- You have an empty HTML element you want to populate with some data from the server. And it may change over time.
In the case of #1 you can use the Mediator
. In that case your View is your HTML, since it alone is responsible for displaying data. The Mediator
will listen to changes on your HTML view like it is supposed to do.
In the case of #2 you can use the View
class and attach a Mediator
to your view. You'll use template files to render your html. In that case your HTML is called templates and the responsibility of making things appear on the screen is left to your View
class.
All that to say you can use your Mediator
class in two ways.
-
Where it acts with the view as the HTML. In that case you'll pass an HTML element to your
Mediator
. -
Where you have a view responsible for populating the template. In that case you'll pass a view class to the
Mediator
.