Compound.js: Controller, Routing and simple Ajax request

I created one simple sample app that shows  how Compound.js controllers and routings workings.

First you should create new controller with the controller generator:

 compound g controller fruits show profile ajax_get_profile  

This command will generate new controller class and methods into the directory app/controllers. It name will be “fruits” and it will contain three methods.

 load('application');  

 action('show', function () {  
  render({  
   title: "fruits2#show"  
  });  
 });  

 action('profile', function () {  
  render({  
   title: "fruits2#profile"  
  });  
 });  

 action('ajax_get_profile', function () {  
  render({  
   title: "fruits2#ajax_get_profile"  
  });  
 });  

…then I defined the necessary routings in the config/routes.js.

 exports.routes = function (map) {  

   //fruits controller's routings  
   map.get('profile/:name', 'fruits#profile');   
   map.get('ajax_get_profile/:name', 'fruits#ajax_get_profile');   

   //default routings  
   map.all(':controller/:action');  
   map.all(':controller/:action/:id');  
 };  

I made very simple client-side JavaScript. I used jQuery. The JS file name is profile.js and there is in the public/javascripts/profile.js directory.

   
 /*  
  Profile JavaScript methods  
 */  
 (function() {  
   $('#button1').click(function() {  
     var name = $('#test_container').data('name');  
     $.ajax({  
         url: '/ajax_get_profile/' + name,  
         cache:false,  
         success: function(response) {  
             alert(response.name);  
             alert(response.id);  
         }  
     });   
   });  
 }).call(this);  

I created two view files. In this example I used ejs template because this is the default template engine.

1. app/views/profile.ejs:

 <div class="page-header">  

 <h1><%= title %></h1>  

 <%= name %>  

 <br />  

 <span id="test_container" data-name="<%= name %>"></span>  

 <button id="button1" type="button">Test Ajax</button>  

 <%- javascript_include_tag('profile') %>  
 </div>  

2. app/views/show.ejs:

 <div class="page-header">  

 <%= id %>  

 </div>  

I wrote some lines code into the controller methods…

 load('application');  

 /**  
  *   
  * @returns object show fruit by id  
  */  
 action('show', function () {   
  this.id = req.params.id;  
  render({  
   title: "fruits#show",  
   id: this.id,  
  });  
 });  

 /**  
  *   
  * @returns object show fruit profile  
  */  
 action('profile', function () {   
  this.name = req.params.name;  

  render({  
   title: "fruits#profile",  
   name: this.name  
  });  
 });  

 /**  
  *   
  * @returns object ajax_get_profile fruit by id  
  */  
 action('ajax_get_profile', function () {   
  this.name = req.params.name;  
  send({ name: this.name, id: 1 });  
 });  

As you can see, it is very simple you should use the send() method in your ajax controller class. It send a JSON object to the client what you can parse it normally in the client-side JS. (See above.)

You can test it on these URLs:

http://127.0.0.1:3000/profile/banana

http://127.0.0.1:3000/fruits/show/2

and the Ajax action: http://127.0.0.1:3000/ajax_get_profile/bananas (or click on the button :))

Advertisements
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

One Response to Compound.js: Controller, Routing and simple Ajax request

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s