JMVC is divided into the following sub-projects
- jQueryMX – a set of jQuery plugins
- StealJS – dependency management
- FuncUnit – testing framework
- DocumentJS – documentation generation
To limit the scope of this article only jQueryMX is discussed, the MVC part of JMVC
jQueryMX is a group of jQuery extensions, the building blocks of MVC. Although these extensions are packaged toghether, you can use them individually too. With the Download Builder you can select the extensions you need.
This is just the basics, it’s real power is inheritance and namespacing
This is a Class inheritance example, demonstrating function overriding. First the Bar class is created and namespaced with com.example. In complex environments namespaces are crucial, because without them you would pollute your global namespace and risk getting nasty conflicts, with the result of timeconsuming bug hunts.
Furthermore, the Foo class inherits from Bar and overrides the toString method.
With $.Controller you can write widgets like sliders, tabs or grids. It simplifies widget development, especially event management; on() and off() are called behind the scene. Take a look at the following example, it shows how easy it is to use events
Binding events always apply to elements inside the widget-element. You can change this scoping feature by prepending the event/selector definition by a DOM object surrounded by curly braces (see line 12)
This extension provides a very powerful and robust data layer, with features like JSON/REST support and the Observable pattern implementation. Here is an example of how to define and use a Model
Saving the data to a backend is an asynchronious task, so you have to use callback functions. But you can also use the Deferred returned by the save() function. Finally, with the Observable pattern monitoring this Todo model isn’t a big challenge too
( Demo )
The ‘created’ event is fired when a new Todo instance is created/saved. But a controller can also listen to updated and destroyed events. It is also possible to define your own custom events (see the demo). For attribute changes you bind an event handler to the instance itself (line 10).
Working with template engines is very powerful, but with $.View it gets even better. For example, the $.View extension overwrites the jquery modifiers so now you can do things like
With the modifications made by $.View, the html() modifier loads the template file, executes the template engine and inserts the result. $.View comes pre-packaged with 4 different template engines, which you can choose from using the Download Builder. But $.View uses Deferreds too, so why not load the data at the same time
This article is far from a complete reference, but consider it a teaser, providing some insights of what JMVC is and can do. The jQueryMX extensions give your application a good maintainable structure and all its features will definitely boost software development. Because of its good structure, this framework perfectly fits together with frameworks that lag this capability. A good example I think would be jQueryMobile.
- Download Builder
- jQuery.tmpl – very nice templating engine
- Building a slider widget tutorial
- jQueryMX UI library