Basic Examples

In the following examples you can change the values of the model section and test the effect of these changes in the view. Please, change only the values of the declared variables, and, eventually, add new elements to defined arrays. Do not change the name or structure of the model section data.

Examples of value

Simple variables are used to show the simplest uses of Yeast.

The view

My name is $name$ and I am $age-3$ years old.

I wish my salary would be $salary$ \$.

I work at The University of La Rioja

The model used in the example

<script yst="model">
  name = 'Francisco García';
  age = 38;
  salary = 1000000;
  workPlace = "http://www.unirioja.es";
</script>

The Yeast code

Example of if. Color temperature

Depending on the temperature variable value, you will see a different color in the 'thermometer'.

The view

                         

The model used in the example

<script yst="model">
  // You can change the temperature value (positive or negative values)
  temperature=5;
</script>

The Yeast code

Example of apply. A list of countries

You can change the country names, continents and codes. The flag is identified by the country code. Other available country flags are: IT-Italy, IN-India, BR-Brazil, CM-Cameroon, NZ-New Zealand

The view

Italy (Europe)
$e.name$ ($continents[e.continent]$)

The model used in the example

<script>
  // Init block: data structure representing several country data
  function Country(code,name,continent,isIsland) {
    this.code = code;
    this.name = name;
    this.continent = continent;
    this.isIsland = isIsland;
  }
  continents = ['Africa','America','Asia','Europe','Oceania'];
</script>
<script yst="model">
// Model section 
// Other stored country flags: IT-Italy, IN-India, BR-Brazil, CM-Cameroon, NZ-New Zealand
countries = new Array();
countries[0] = new Country('SP','Spain',3,false);
countries[1] = new Country('CN','China',2,false);
countries[2] = new Country('AU','Australia',4,true);
countries[3] = new Country('EG','Egypt',0,false);
countries[4] = new Country('US','United States',1,false);
//countries[5] = new Country('IT','Italy',3,false);
</script>

The Yeast code

or using the ystUpTo attribute

Example of compApply

Click the checkboxes and the total price will change. The color of checked lines will change.

The view

 $e.description$ ($e.price$ \$)
 $e.description$ ($e.price$ \$)

Total : 0.0 \$

The model used in the example

<script>
  // Init block: data structure representing the description and price of a product 
  function Product(description,price) {
    this.description = description;
    this.price = price;
  }
</script>
<script yst="model">
  // Model section
  basket = new Array();
  basket[0] = new Product('Pencil',1.2);
  basket[1] = new Product('Suitcase',100);
  basket[2] = new Product('Umbrella',30.5);
  basket[3] = new Product('Television',1575);
</script>

The Yeast code

Using compApply, we iterate over the elements of the basket array (a set of Product objects, defined in the init block), creating one div element for each product. Depending on the iteration index value ( ystTest="i%2==0" or ystTest="i%2!=0"), the background color of the line will be different. Each generated div is assigned an identifier (id="id$i$"). This identifier is used by the onClick event handler to change the div background color and to calculate the total price of the selected products