• Contents
  • Introduction
  • Downloads
  • Documentation

Jetinject

Introduction

Download

You can download the artifacts directly from here:

• http://dl.dropbox.com/u/747152/downloads/jquery.jetinject.js
• http://dl.dropbox.com/u/747152/downloads/jquery.jetinject.min.js

Source code repository

Or if you want, the source code is directly available from the repository at the link below:

https://github.com/olle/jetinject

Documentation

With the dependency injection pattern and IoC containers comes the benefits of cleaner, better separated, more testable and reliable code.

How do you use it?

It's easy. Create instances of you classes and resolve dependencies by injecting them as properties.

$.applicationContext({
	 
   // Declares some beans:
   'v8' : {'type' : V8Engine },         // subclass of Engine 
   'mustang' : {'type' : MustangBody }, // subclass of Body
	 
	 // And then wires them together:
   'car'     : {
   	  'type' : Car,
			'props' : {
         'engine'  : {'ref' : 'v8'},     // injects bean 'v8'
         'body'    : {'ref' : 'mustang'} // injects bean 'mustang'
      }
   }
});

var car = $.getBean('car');
car.letTheEngineRoar();

Dependency injecting tools for IoC in dynamic languages is clearly not for everybody, but it can give you cleaner code and help you keep unit tests small and controlled - even for JavaScript.

Search widget example

In this example I will show how to build a simple search widget/thingy and wire it to the page using Jetinject and jQuery. The goal here is to make a widget object that will handle serching and result presentation, when attached to a FORM-element.

Feel free to download, examine and play with the full example code if you like.

We'll start by defining the widget class as a type with two properties a service and a view. In our small example we will assume that we know the interfaces for both property types.

The service has a getSearchResults-method that we can call with a search word and a callback method to handle the results.

Our view needs to implement the showSearchResults-method to present search results.

/**
 * Search widget
 */
Search = function() {
  this.service = {};
  this.view = {};
};

/**
 * A search widget can be attached to a form input-element.
 */
Search.prototype.attachTo = function(element) {
  var the = this;
  $(element).submit(function(event) {
    event.preventDefault();
    if ((q = event.target['q'].value) == '')
      return;
    the.service.getSearchResults.call(the.service, q, function() {
      the.view.showSearchResults.call(the.view, the.service.results, element);
    }, the);
  });
};

SearchView = function() {
};

/**
 * A search view can show the search results as HTML
 */
SearchView.prototype.showSearchResults = function(results, element) {
  $('#summary', element).remove();
  $('#results', element).before('<p id="summary">' + results.length + ' results found.' + '</p>').empty();
  $(results).each(function(i, result) {
    $('#results', element).append('<li>' + result + '</li>');
  });
  $('#q', element).val('');
};

/**
 * The search service has search results
 */
SearchService = function() {
  this.results = [];
};

/**
 * And implements the actual search
 */
SearchService.prototype.getSearchResults = function(q, callback, context) {
  var the = this;
  $.getJSON('/js/projects/jetinject/search.php?q=' + q, function(json) {
    the.results = json;
    callback.call(context);
  });
};

/**
 * Now we can wire together our search widget, and let Jetinject connect the
 * parts.
 */
$.applicationContext({
	 // Constructing beans for view and service...
   'myView' : {'type' : SearchView},       // actual class 
   'myService' : {'type' : SearchService}, // actual class
  
   // Wiring a search instance
   'search' : {'type' : Search, // actual class
	    'props' : {
         'view' : {'ref' : 'myView'},      // bean reference
         'service' : {'ref' : 'myService'} // bean reference
      }
   }
});

// Attach search widget to form
$('#search').each(function(index, element) {
  $.getBean('search').attachTo(element);
});