/**
*    @Author: Arash Karimzadeh
*    @Email:
*    @Desciption: Here, I post some of my recent
*    researches. Also you can see my code projects.
*/  
Ajax C # Chrome CMS dateNet Design Patterns includeMany JavaScript jBind Joomla jQuery Plugin rails ror RubyOnRails SQLite xul

+ All tags

Content View Hits : 338281
Bookmark and Share
jQuery Fill (by data) PDF Print
Written by Arash Karimzadeh   
Friday, 30 January 2009 09:59

When you want to fill a part of your html once and show it. You can use $(selector).bind(data,{fill:true}); which require jBind plugin.

jBind will bind will first find the html content of matched selector and fill it's content with assigned data. You can find out more by downloading it's sample package or reading it's documentation.

This feature is added in version 1.5.3

jQuery Fill Feature of jBind

This way you can fill a part like this with data:


              
    
                
  1. 
                  
    
                    
                  
    
                
    2. 
                
  2. 
                  
    
                     id='template'>
                  
    
                
    3. 
                
  3. 
                  
    
                     class="content">
                  
    
                
    4. 
                
  4. 
                  
    
                    
                  
    
                
    5. 
                
  5. 
                  
    
                     class="viewBlock" id='{id}'>
                  
    
                
    6. 
                
  6. 
                  
    
                    {name} {family}, [ Birthdate: {birthdate} ]
                  
    
                
    7. 
                
  7. 
                  
    
                    
    
                  

                
                
  • 
                  
    
                    
                  
    
                
    • 
                
  • 
                  
    
                    
    
                  
                
    • 
                
  • 
                  
    
                    
    
                  
                
    • 
                
  • 
                  
    
                     id='show'>
    
                  
                
    • 
                
  • 
                  
    
                    
                  
    
                
    • 
              
              
    
              
    
                 
              
    
              
    
              
            
            
    
            
    Using:
    
            
    
            
    
              
    
              
      
                
    1. 
                  
      
                    $('#template').bindTo(data,{'root':'info',fill:true});
                  
      
                
      2. 
              
    
              
    
              
    
                 
              
    
              
    
              
            
    
            
    
            
    So the result is:
    
            
    {geshibot lang="html4strict"}
    
            

    
            

    
            

    
            Scott Adams, [ Birthdate: June 8 1957 ]
    
            

    
            

    
            

    
            

    
            {/geshibot
    
            
    You can download this file from jBind example package in download section.
    
            
    Tags: jBind | jQuery | Plugin
    
          
    		
        
    
        
    
          Last Updated on Monday, 27 September 2010 12:34