Getting started with javascriptmvc-2. jquerymx

Jquerymx is composed of a series of useful jquery class libraries, which can help you develop large-scale jquery applications. Each part of jquerymx can be used independently, which makes your application lighter and $. string, $. class, $. model, $. view, $. class libraries such as controller are only 7 kb after compression.

If you use steal, you can load the plug-in as follows:

steal('jquery/controller', function(){  $.Controller('Tabs');})

Or go to the official website download builder to download the files you need.

Jquerymx consists of four core components: Dom help class, language help class, special events, and MVC related classes (model, view, Controller, and class ). Next we will give a brief introduction one by one.

　　

　　Dom help class

Dom helper extends dom-related functions for jquery. For example, you can set the outer width and height of an element.

$('#foo').outerWidth(500);

Of course, he also provides some other plug-ins:

COOKIE: Get or set the cookie value.

Fixture: Simulate Ajax response.

Closest: Use the sub-selector in the event Delegate.

Compare: Compares the positions of two elements quickly.

Curstyles: Quickly retrieves multiple CSS attributes.

Formparams: serialize a form into a JSON-type object.

Selection: gets or sets the selection area of the current text.

Within: returns the elements in a specific area.

Range: Text area tool class, including creation, movement, and comparison methods.

Jquery. Route: Provides history-based routing for Ajax applications.

 

　　Special events

Jquerymx includes special events and event help classes:

Drag: Provides Delegation for drag and drop events.

Drop: provides the delegate to release events.

Hover: Provides Delegation for hovering events.

Destroyed: Provides Event Notifications for removing elements from the page.

Resize: monitors any element of the resize event.

Swipe: Provides Delegation for swipe events.

Key: obtains the corresponding characters from a key event.

Default: Provides default actions for events.

Pause-resume: pause or resume event propagation.

 

　　Language help

The language help class makes it easier to execute different functions on JavaScript data.

Object: Compare object or set.

Observe: Listener object or array change.

String: String help class.

Tojson: Create and convert a JSON string.

Vector: vector method.

 

　　$. Class

$. Class provides simple prototype inheritance, which will be used in $. Controller and $. model. Example:

// Create a monster class $. class ("monster", // static method {// monsters array object monsters: []}, // prototype method, that is, the instantiation method {// initialization method, equivalent to the constructor init: function (name) {// store the name variable in the name attribute this. name = Name; // Add the current instance to the monsters array. This. class. monsters. push (this) ;}, // an instantiation method speak: function () {alert (this. name + "says hello. ") ;}}); // create a monster instance var Hydra = new monster (" Hydra "); // call the monster method Hydra. speak ();

 

　　$. Model

$. Model encapsulates the service and data layer. Let's look at an example:

$.Model("Task",{  findAll : "GET /tasks.json",  findOne : "GET /tasks/{id}.json",  create  : "POST /tasks.json",  update  : "PUT /tasks/{id}.json",  destroy : "DELETE /tasks/{id}.json"},{  canDestroy : function(){    return this.acl.indexOf('w') > -1  }});

Suppose '/tasks. json' will return the following JSON data:

[{  "id"       : 1,  "name"     : "take out trash",  "acl"      : "rw",  "createdAt": 1303000731164 // April 16 2011},{  "id"       : 2,  "name"     : "do the dishes",  "acl"      : "r" ,  "createdAt": 1303087131164 // April 17 2011}]

The following code Retrieves all the tasks from the server and then destroys tasks that can be destroyed by users:

Task.findAll({}, function(tasks){  for(var i =0; i < tasks.length; i++){    var task = tasks[i];    if( task.canDestroy() ){      task.destroy();    }  }});

　　

Model has some other useful features.

1. Listen to the [jquery. model. Events] event:

// Listen for changing the name of a task. BIND ("name", function (EV, newname) {alert ('Task name = '+ newname) ;}); // change the nametask of the task. ATTR ('name', "laundry"); // listens to the task's created event task. BIND ("created", function (EV, newtask) {// create the HTML of newtask and add it to the page });

2. Convert metadata into more useful objects:

$. Model ('task', {convert: {'date': function (raw) {return new date (raw) }}, attributes: {'createdat ': 'date' }},{}); var task = new task ({createdat: 1303087131164}); // createdat is a date data task. createdat. getfullyear () //-> 2011

3. Method of instance object on List

// Define the task list $. model. list ('task. list', {// Add the help method candestroyall: function () {return this. grep (function (task) {return task. candestroy ();}). length = This. length}); task. findall ({}, function (tasks) {// tasks is a task. list tasks. candestroyall () //-> Boolean })

4. latency

// Get two requests. When both ends, do something $. when (task. findall (), people. findall ()). done (function (tasks, people) {// do something })

 

　　$. View

$. View is a template framework that allows you to use different template engines in the same way. Let's look at an example:

Task.findAll( {}, function(tasks){  $('#tasks').html( 'task/views/tasks.ejs', tasks );});

After the request is processed, the template is loaded from task/views/tasks. ejs, and the current tasks is rendered. The result is displayed in the # tasks element. Tasks. ejs looks like this:

<% $.each(this, function(task){  %>  <li><%= task.name %></li><% }) %>

$. View uses latency, so it is equivalent to the following code:

 $('#tasks').html( 'task/views/tasks.ejs', Task.findAll() );

Javascriptmvc supports the following template engines: jquery. ejs, jaml, micro, and jquery. teml.

 

　　$. Controller

$. Controller is the jquery plug-in creation factory. The following Code creates a $. FN. List plug-in, like writing information in an element.

$. Controller ("list", {init: function () {This. element. text (this. options. message) ;}}); // create list $ ('# list '). list ({message: "Hello World "});

$. Controller allows you to create default properties.

$. Controller ("list", {defaults: {message: "I am list" }}, {init: function () {This. element. text (this. options. message) ;}}); // create a list with "I am list"

 $('#list').list();

The biggest feature of controller is to facilitate event management, such as binding and canceling events. The following example adds a click event for the Li element.

$. Controller ("tasklist", {init: function () {// use a view to render tasks this.element.html ("tasks. ejs ", task. findall ();}, "Li click": function (EL) {alert (El. text ());}});

The Controller facilitates parametric event binding. The following Code monitors the events created and inserted to the list by tasks.

$. Controller ("tasklist", {init: function () {// use view to render tasks this.element.html ("tasks. ejs ", task. findall () ;}, "{task} created": function (task, Ev, newtask) {This. element. append ("tasks. ejs ", [newtask]) ;}});

Finally, it makes it easier to create plug-ins for any model.

$. Controller ("list", {init: function () {// use view to render tasks this.element.html (this. options. view, this. options. model. findall () ;}, "{model} created": function (model, Ev, instance) {This. element. append (this. options. view, [instance]) ;}}); $ ("# tasks "). list ({model: task, view: 'tasks. ejs'}); $ ("# People "). list ({model: person, view: 'People. ejs '});