Javascriptmvc entry-5. jquerymx-> $. Controller: event listening

It is quite easy for the Controller to create and cancel event listening. The cancellation event can prevent memory leakage, which is a long-runningProgramVery helpful.

 

1. Automatic Binding

When a controller is created, it will call the methods in the prototype and check the newly created functions whose names look like events, then they are bound to the event Delegate corresponding to the HTML element. When the controller is destroyed, these events are canceled. In the following example, all functions will be automatically bound:

$. Controller ("crazy",{//Listen to all click events of the element"Click ":Function(EL, Ev ){},//Listen to all the Mouseover events of the Li object in the Controller"Li Mouseover ":Function(EL, Ev ){}//Listen to the resize event of the window"{Window} resize ":Function(Window, Ev ){}})
 

Event binding is automatically completed, but there is a special case that the function name is not in $. event. special. You need to add it to the listensto attribute.

$. Controller ("myshow", {Listensto :["Show"] },{ Show:Function(EL, Ev) {El. Show () ;}}) $ ('. Show'). my_show (). Trigger ("show ");
 

2. Callback Parameters

When a controller event is executed, the HTML element and event will be used as the callback function parameter. This represents the Controller instance.

$. Controller ("tabs",{//Li-HTML element of clicked//Ev-Click Event"Li click ":Function(Li, Ev ){This. Tab (LI). Hide ()}, Tab:Function(LI ){Return$ (Li. Find ("A"). ATTR ("href"))}})
 

3. template-based event binding

A powerful feature of controller is templated event binding. You can parameterize event names, selectors, and root elements of events.

 

3.1 templated event name and selector:

Generally, you want to set the behavior configuration information of the plug-in, for example, through which events (click orMouseenter) Displays the sub-menu of the menu. The following example shows how to set a click event and a mouseenter event:

 
$. Controller ("menu",{"Li {showevent }":Function(EL) {El. Children ('Ul'). Show () }}) $ ("# Clickme"). menu ({showevent: "click"}); $ ("# Touchme"). menu ({showevent: "mouseenter "});
 

$. Controller replaces the value in {} with the value in options. We can easily provide the default showevent without additional configuration.

$. Controller ("menu", {Defaults: {showevent:"Click"}},{"Li {showevent }":Function(EL) {El. Children ('Ul'). Show () }}); $ ("# Clickme"). menu ();//Click is used by default.
 

Sometimes we want to trigger events through different HTML elements. For example, we configure the button in the following example:

 
$. Controller ("menu",{"{Button} {showevent }":Function(EL) {El. Children ('Ul'). Show () }}) $ ('# Buttonmenu'). menu ({button: "button "});
 

3.2 templated root elements

Controller allows you to bind events to other elements beyond the Controller HTML element. For example, we have bound a click event to the window:

$. Controller ("hideonclick",{"{Window} click ":Function(){This. Element. Hide ()}})
 

The followingCodeBind the event to the creation of the app. Models. Todo object (possibly another controller:

 
$. Controller ("newtodos",{"{App. Models. Todo} created ":Function(Todo, Ev, newtodo ){This. Element. append ("newtodos. ejs", Newtodo )}});
 

Similarly, we can make our code more flexible through configuration-based programming:

$. Controller ("Newbie",{"{Model} created ":Function(Model, Ev, newitem ){This. Element. append (This. Options. View, newitem) }}); $ ('# Newitems'). Newbie ({model: App. Models. Todo, View:"Newtodos. ejs"})
 

Then how does a templated event work? When the Controller replaces the value in {}, it first queries whether there is a matching value in options. If not, it searches for it in the window object.

 

4. Subscription openajax information and custom binding

Jquery/controller/subscribe plugin allows the Controller to listenOpenajax. HubMessage.

$. Controller ("listener",{"Something. Updated subscribe ":Function(Called, data ){}})
 

You can add events to jquery. Controller. Static. processors to implement custom binding.

 

5. Manually bind events

[Jquery. Controller. Prototype. Bind] And jquery. Controller. Prototype. Delegate allow you to listen to events on other HTML elements. These event listening will be unbound when the controller is destroyed.