SOURCE CODE: List Template

  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    List Template
    

      
SOURCE
    
  

  

    

    

      

      

        
In this example, the Uize.Templates.List template is being used to populate a node in the page (to the left) with a hierarchical, unordered list that is built from a JSON data tree structure.

        
There's nothing in the node when the page loads - you should click on one of the linked JavaScript snippets below to build lists from different data sets. What you see in the JavaScript links is exactly the JavaScript code that will be executed when you click the links and that is responsible for building the list HTML and putting it into the page.

        
Now, it's just a list - nothing more. We're not dealing with an expandable/collapsible tree widget here - just a dead simple list generator template. JavaScript templates can be used to generate markup for widgets, or they can be used by build scripts to build HTML pages, or by server side JavaScript to generate HTML pages.
      

      

      

        

          
page.setNodeInnerHtml ('listShell',Uize.Templates.List.process ({items:Uize.Test.TestData.Animals ()}))


          
page.setNodeInnerHtml ('listShell',Uize.Templates.List.process ({items:Uize.Test.TestData.Plants ()}))


          
page.setNodeInnerHtml ('listShell',Uize.Templates.List.process ({items:Uize.Test.TestData.AnimalsAndPlants ()}))