Adding two matrixes

Perhaps you are thinking that this example has no interest for HTML designers. Of course, the posibility of perform mathematical operations is not the objective of Yeast. We present this example because it is shows the basic layout for the construction of data tables. And, you will agree with me, this is a common element in HTML pages.

The view


The model used in the example

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.

<script yst="model">
  // You can change the matrix values
  m = new Array();
  m[0] = [1,0,0,0,0];
  m[1] = [0,2,0,0,0];
  m[2] = [0,0,3,0,0];
  m[3] = [0,0,0,4,0];
  m[4] = [0,0,0,0,5];

  m2 = new Array();
  m2[0] = [-1,0,0,0,0];
  m2[1] = [0,-2,0,0,0];
  m2[2] = [0,0,-3,0,0];
  m2[3] = [0,0,0,-4,0];
  m2[4] = [0,0,0,0,-5];

The Yeast code

Each matrix is rendered using the values of each one of the matrixes defined in the model section. We use apply to iterate over each matrix rows (<tr yst="apply" ystSet="m">...</tr>). At each iteration step the value of the implicit-variable e points to each one of the matrix rows. We use its value as the value of the ystSet attribute for the nested apply, which iterates over the each row component (<tr yst="apply" ystSet="m"><td>X$i+1$</td><td yst="apply" ystSet="e">$e$</td></tr>).

In the resultant matrix, we specify m as the master matrix array in the apply ystSet attribute. This selects each row of the matrix m. The row of m2 is selected using the auxiliar attribute ystAux (ystAux="$# e1=m2[i]$"). Note that being m the apply set, at each iteration i e=m[i] and, by means of the ystAux attribute, e1=m2[i]. At each iteration we will add the suitable matrix rows. In the nested <td> element we iterate over the cell elements adding each element of both matrix rows (<tr yst="apply" ystSet="e">$e+e1[i]$</tr>).