SOURCE CODE: Dynamic Options

  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Dynamic Options
    

      
SOURCE
    
  

  

  

    
In this example, the markup for an options widget is being wired up by an instance of Uize.Widget.Options. Below the options are some links that execute snippets of code to demonstrate the programmatic interface of the widget. The Uize.Widget.Options class provides value and tentativeValue state properties in its interface. The Changed.value and Changed.tentativeValue instance events for these two properties can be used to watch for changes in the widget's state. The value state property can be set to programmatically change the selected option. Interact with both the options UI and the test links to see how they affect one another.

    
What's most interesting about this example is that it uses the Uize.Widget class' support for inline JST (JavaScript Template) script blocks for declaring a widget's HTML generator, as well as the Uize.Widget.Options class' behavior of invoking the generator to rebuild the UI each time the options set changes (i.e. the values state property changes value). In the list of programmatic links below, you'll see some links that set the values state property (labeled "Set the values list"). Click these links and see how the widget dynamically rebuilds its UI to reflect the new values. View the source of the page and you'll see the <script type="text/jst"> block tucked inside the root node of the options widget.
  

  

  

    
    
  
  


  

  

    

      
options.get ('value') == ''
      
options.get ('tentativeValue') == ''
      
Types of renewable energy...
        

          
Set the values list: options.set ({values:['solar','wind','geothermal','efficiency','tidal'],value:'solar'})
          

            Set value:
            options.set ({value:'solar'})
             , 
            options.set ({value:'wind'})
             , 
            options.set ({value:'geothermal'})
             , 
            options.set ({value:'efficiency'})
             , 
            options.set ({value:'tidal'})
          
        
      
      
Types of fruits...
        

          
Set the values list: options.set ({values:['apples','grapefruits','mangos','plums','strawberries'],value:'apples'})
          

            Set value:
            options.set ({value:'apples'})
             , 
            options.set ({value:'grapefruits'})
             , 
            options.set ({value:'mangos'})
             , 
            options.set ({value:'plums'})
             , 
            options.set ({value:'strawberries'})
          
        
      
      
Types of big cats...
        

          
Set the values list: options.set ({values:['jaguar','cheetah','leopard','tiger','cougar'],value:'jaguar'})
          

            Set value:
            options.set ({value:'jaguar'})
             , 
            options.set ({value:'cheetah'})
             , 
            options.set ({value:'leopard'})
             , 
            options.set ({value:'tiger'})
             , 
            options.set ({value:'cougar'})