Javascript MVC -- Controller

 

Original article: http://javascriptmvc.com/docs.html#&who=jQuery.Controller

Liu guixue, liuguixue@gmail.com)

 

 

The controller uses a proxy to organize event processing. If an event occurs in your application (user clicks or model instance updates), the Controller should process the event and respond to it.

The controller can make your code clearer, more reusable and more efficient, which can be automatically isolated from the underlying code. To learn more about the Controller theory and related features, follow the Jupiter blog.

Basic example

Before replacement:

$ (Function () {<br/> $ ('# tabs '). click (somecallbackfunction1) <br/> $ ('# tabs. tab '). click (somecallbackfunction2) <br/> $ ('# tabs. delete click '). click (somecallbackfunction3) <br/> }); 

After replacement:

$. Controller ('tabs', {<br/> CLICK: function (){...}, <br/> '. tab click': function (){...}, <br/> '. delete click': function (){...} <br/>}) <br/> $ ('# tabs '). tabs (); 

Tabs instance uses Controller

The controller can help you organize and build jquery plug-ins. It can be used to build some simple micro-pieces, such as slider, or make multiple micro-pieces larger. To understand how to use the controller, you also need to understand the general jquery microware lifecycle and how to map to the controller function.

Create a controller class

$. Controller ("mywidget", <br/>{< br/> defaults :{< br/> message: "Remove me" <br/>}< br/> }, <br/>{< br/> init: function (rawel, rawoptions) {<br/> This. element. append (<br/> "<div>" + this. options. message + "</div>" <br/>); <br/>}, <br/> "Div click": function (DIV, Ev) {<br/> Div. remove (); <br/>}< br/> }) 

This will create a jquery helper function called $. FN. my_widget, which can be used to create a new controller instance on the HTML element.

Create a controller instance on the HTML Element

$ ('. Thing'). my_widget (options) // call New mywidget (El, options)

It calls mywidget (El, options) on each '. action' element ). When creating a (class) new instance, the system will call the prototype Methods setup and init of the class. The setup function of the controller is as follows:

• Set this. element and add the Controller name and the class name of the element;
• Set the default object parameter to this. options;
• Retain a reference in $. Data of the Controller;
• Bind all event handlers

Controller RESPONSE event

Generally, controller event processing is automatically bound. The controller can listen to events in multiple ways.

When an event occurs, the callback function of this (referenced by the current controller instance) is called, which makes it easier to use helper functions and saves the status in the controller.

Destruction of microservices

If an element is removed from the page, the jquery. Controller. Destroy function is called for processing and uninstalling. Of course, you can also use other methods to handle the uninstallation:

$ ('. Thing'). my_widget ('deststroy '); 

Todos example

Let's take a look at a very simple example. Your HTML should be as follows:

<Div id = 'todos '> <br/> <ol> <br/> <li class = "Todo"> laundry </LI> <br/> <li class = "Todo"> dishes </LI> <br/> <li class = "Todo"> walk dog </LI> <br/> </OL> <br/> <A class = "CREATE"> Create </a> <br/> </div> 

Add a style to mousover and create a new service to be processed. Your controller should be as follows:

$. Controller. extend ('todos ', {<br/> ". todo Mouseover ": function (El, Ev) {<br/> el.css (" backgroundcolor "," Red ") <br/>}, <br/> ". todo mouseout ": function (El, Ev) {<br/> el.css (" backgroundcolor "," ") <br/>}, <br/> ". create click ": function () {<br/> This. find ("ol "). append ("<li class = 'todo '> New todo </LI>"); <br/>}< br/> }) 

To create a controller class, you must create a controller instance on the '# todos' layer to add event processing. There are two methods:

// 1. directly create a controller instance <br/> New todos ($ ('# todos'); <br/> // 2. use the jquery function <br/> $ ('# todos '). todos (); 

Controller Initialization

It is very useful to add an init function to your widget. In the following example, we create a controller and output an HTML element of a message:

$. Controller. extend ("specialcontroller", <br/>{< br/> init: function (El, message) {<br/> this.element.html (Message) <br/>}< br/>}) <br/> $ (". special "). special ("Hello World ") 

Delete Controllers

Jquery supports the removal of controller. To remove a controller, you only need to remove its elements:

$ (". Special_controller"). Remove () <br/> $ ("# containscontrollers" ).html ("") 

Note: If you use the original DOM method (innerhtml, removechild), its controller cannot be destroyed.

If you only want to delete the controller function, call the destroy function of the controller instance:

$ (". Special_controller"). Controller (). Destroy () 

Access Controllers

Sometimes you need to obtain a controller reference. There are several methods to do this. Let's take a look at the example below. We assume there are two classname = "special" elements.

// Create 2 Foo controllers <br/> $ (". special "). foo () </P> <p> // create 2 bar controllers <br/> $ (". special "). bar () </P> <p> // obtain the controllers of all elements: <br/> $ (". special "). controllers () //-> [Foo, bar, Foo, bar] </P> <p> // get only Foo controllers <br/> $ (". special "). controllers (foocontroller) //-> [Foo, foo] </P> <p> // obtain all bar controllers <br/> $ (". special "). controllers (barcontroller) //-> [bar, bar] </P> <p> // obtain the first controller <br/> $ (". special "). controller () //-> Foo </P> <p> // obtain Foo Controller Based on Data <br/> $ (". special "). data ("controllers") ["foocontroller"] //-> foo 

Controller function call

Once you have an element reference, you can use the reference to call all functions of the element. However, the Controller also has some call tips:

// Create Foo controller <br/> $ (". special "). foo ({name: "value"}) </P> <p> // call foocontroller. prototype. update <br/> $ (". special "). foo ({name: "value2"}) </P> <p> // call foocontroller. prototype. bar <br/> $ (". special "). foo ("bar", "Something I want to pass ")