Javascriptmvc tutorial-7. Start Using jquerymx-class

Source: Internet
Author: User
Tags findone

The Controller and model of jmvc inherit from $. Class. To create a new class, you need to call $. Class (name, [classproperties,] instanceproperties]), for example:

$.Class("Animal",{  breathe : function(){     console.log('breathe');   }});

In the above example, the animal instance has a breathe method. We can create a class instance like below and call the breathe method:

var man = new Animal();man.breathe();

If you want to create a subclass, you can call the base class and input the subclass name and method:

Animal("Dog",{  wag : function(){    console.log('wag');  }})var dog = new Dog;dog.wag();dog.breathe();



When a class instance is created, the init method is called, and the constructor parameters are used as parameters of the init method.

$.Class('Person',{  init : function(name){ = name;  },  speak : function(){    return "I am "".";  }});var payal = new Person("Payal");assertEqual( payal.speak() ,  'I am Payal.' );


  Access Base Methods

You can use this to access the base class. _ super. In the following example, classyperson is inherited from person. He overwrites the person's speak method and uses this. _ super () can access the Speak implementation in person.

Person("ClassyPerson", {  speak : function(){    return "Salutations, "+this._super();  }});var fancypants = new ClassyPerson("Mr. Fancy");assertEquals( fancypants.speak() , 'Salutations, I am Mr. Fancy.')



The callback method of class is similar to $. Proxy. This value of the internal function points to the class instance itself.

$.Class("Clicky",{  init : function(){    this.clickCount = 0;  },  clicked: function(){    this.clickCount++;  },  listen: function(el){ this.callback('clicked') );  }})var clicky = new Clicky();clicky.listen( $('#foo') );clicky.listen( $('#bar') ) ;


  Static inheritance

Class allows you to define static attributes and methods that can be inherited. The following code allows us to use person. findone (ID, success (person) obtains the person instance from the server, and then calls the success method.

$.Class("Person",{  findOne : function(id, success){    $.get('/person/'+id, function(attrs){      success( new Person( attrs ) );    },'json')  }},{  init : function(attrs){    $.extend(this, attrs)  },  speak : function(){    return "I am "".";  }})Person.findOne(5, function(person){  assertEqual( person.speak(), "I am Payal." );})



Class provides namespaces, including the names of classes and namespaces.

$.Class("Jupiter.Person");Jupiter.Person.shortName; //-> 'Person'Jupiter.Person.fullName;  //-> 'Jupiter.Person'Jupiter.Person.namespace; //-> Jupitervar person = new Jupiter.Person();person.Class.shortName; //-> 'Person'


  Model example

After sorting out the above code, we can implement an ORM-style model layer. By inheriting the model, the subclass has the findone method, which can request data from the server. The returned result creates an instance of the class.

$.Class("Model",{  findOne : function(id, success){    $.get('/'+this.fullName.toLowerCase()+'/'+id,       this.callback(function(attrs){         success( new this( attrs ) );      })    },'json')  }},{  init : function(attrs){    $.extend(this, attrs)  }})Model("Person",{  speak : function(){    return "I am "".";  }});Person.findOne(5, function(person){  alert( person.speak() );});Model("Task")Task.findOne(7,function(task){  alert(;})

The above code is similar to the functions implemented by $. Model in jquerymx.


Javascriptmvc tutorial directory

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.