Getting started with javascriptmvc-4. jquerymx-> $. Controller

$. Controller is used to create easy-to-manage, memory-saving, and efficient jquery plug-ins. Strong flexibility allows him to be a traditional view or controller. You can use it to create tabs, grids, and text menus, or instill more complex business logic into them. Controller makes your code more explicit, reusable, and more organized. It inherits the $. Class and uses event delegation.

Basic example:

Traditional practices:

$(function(){  $('#tabs').click(someCallbackFunction1)  $('#tabs .tab').click(someCallbackFunction2)  $('#tabs .delete click').click(someCallbackFunction3)});

Alternative practice:

$.Controller('Tabs',{  click: function() {...},  '.tab click' : function() {...},  '.delete click' : function() {...}})$('#tabs').tabs();

 

　　Use Controller

Controller helps you create and manage jquery plug-ins. It can be used to create simple plug-ins, such as slider, or combine multiple plug-ins into one. To understand how controller is used, you must have a clear understanding of the lifecycles of traditional jquery plug-ins and understand how they integrate functions on the controller. We use the following method to define a contrioller.

$.Controller("MyWidget",{  defaults :  {    message : "Remove Me"  }},{  init : function(rawEl, rawOptions){     this.element.append(       "<div>"+this.options.message+"</div>"      );  },  "div click" : function(div, ev){     div.remove();  }  })

The above Code creates a name named $. FN. my_widget functions (I will explain how to create and name a controller in the next lesson). You can use it to create a controller instance on an HTML element. The usage is as follows:

$('.thing').my_widget(options)

The above code calls New mywidget (El, options) on all '. The' HTML elements ). When a new class instance is created, the setup and init methods of the class prototype will be called (as described in the previous chapter ). Controller setup provides the following functions:

1. Set this. element and add the Controller name to the class attribute of the element.

2. Merge the input options and default options and pass them to this. Options.

3. Save the controller reference to $. Data.

4. bind all event handlers.

Generally, controller event processing is automatically bound, but there are many ways to do this. I will introduce it below. When an event occurs, the callback function is executed, and this in the callback function executes the current controller instance. This makes it easier to use the help class and save the Controller status.

When the element is removed from the page, the Controller's destroy method will be executed. Here you can perform operations related to destruction. Of course, you can also directly call the destruction method:

$('.thing').my_widget('destroy');

 

　　Todos example

Let's take a simple example. The HTML code is as follows:

<div id='todos'> <ol>   <li class="todo">Laundry</li>   <li class="todo">Dishes</li>   <li class="todo">Walk Dog</li> </ol> <a class="create">Create</a></div>

Controller code:

$.Controller('Todos',{  ".todo mouseover" : function( el, ev ) {    el.css("backgroundColor","red")  },  ".todo mouseout" : function( el, ev ) {    el.css("backgroundColor","")  },  ".create click" : function() {    this.find("ol").append("<li class='todo'>New Todo</li>");   }})

Now the controller has been created, and the next step is how to use it. There are two steps to do this: first create the Controller instance, and then use the Controller instance on the HTML element.

// Implementation method 1new todos ($ ('# todos '));
// Implementation method 2 $ ('# todos'). todos ();

 

　　Initialize Controller

It is quite useful to add an init Method for your plug-in. In the following example, when a controller is created, a message parameter can be transmitted as the content of an HTML element.

$.Controller("SpecialController",{  init: function( el, message ) {    this.element.html(message)  }})$(".special").special("Hello World")

 

　　Remove Controller

The controller uses the jquery remove method, so you can remove the HTML elements to remove the controller.

$(".special_controller").remove()

If you use Dom, there is no way to destroy the controller:

$("#containsControllers").html("")

If you just want to remove the functions on the controller, you can use the destroy function:

$(".special_controller").controller().destroy()

 

　　Access Controller

You often need to get the reference of controller, there are many ways to help you achieve. In the following example, the classname of the two HTML elements is 'special ':

// Create two Foo controllers $ (". special "). foo () // create two bar controllers $ (". special "). bar () // obtain all controllers on all elements $ (". special "). controllers () //-> [Foo, bar, Foo, bar] // only get Foo controllers $ (". special "). controllers (foocontroller) //-> [Foo, foo] // obtain all bar controllers $ (". special "). controllers (barcontroller) //-> [bar, bar] // obtain the first controller $ (". special "). controller () //-> Foo // obtain Foo controller $ (". special "). data ("controllers") ["foocontroller"] //-> foo

 

　　Call the method on the Controller

Once you have reference to an HTML element, you can call the above method.

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