Monday, August 7th, 2006
JavaScript Model-View-Controller with Dojo toolkit
In this new post on his blog, Alexander Netkachev demonstrates how to create a Model/View/Controller framework in Javascript with when help of the Dojo Toolkit.
My goal for this article is to write a simple JavaScript component that can show a power of the language. The component is a kind of the HTML ListBox (“select†HTML tag) control with an editable list of items: the user can select item and remove it or add new items into the list. I will use Dojo toolkit class building functions [link] to create three classes that implement the Dojo’s event system for subscribing on DHTML events and for notifying the View about changes in the Model.
He first talks about what the Model/View/Controller pattern is for those that haven’t used it before (a simple definition). He applies it more to web applications t make it easier to bridge the gap between traditional web development and this design method.
From there it’s all about thge code, first the creation of the ‘ListModel’ to handle the functionality, then the ‘ListView’ to make the HTML output of the script, and, finally, the ‘ListController’ to manage the view and model when a request comes in. Code for that is included too, making a simple multi-select box you can easily add and remove items from.
Leave a comment