<commit_before>@constructor can.EJS
@parent canjs

EJS provides __live__ ERB-style client-side templates. Use EJS 
with [can.view] and for live templating use EJS with [can.Observe].

## Basic Example

The following renders a Teacher's name and students into an element.  First, 
create a teacher template in a script tag like:

    <script type='text/ejs' id='teacherEJS'>
    
      <h2 class='<%= teacher.grade < 'c'? "good" : "bad" %>'>
        <%= teacher.name %>
      </h2>
      
      <ul>
        <% for(var i =0; i< teacher.students.length; i++){ %>
          <li><%= teacher.students[i].name %></li>
        <% } %>
      </ul>
      
    </script>

Notice the magic tags?  Those are things that look like `<% %>` and 
`<%= %>`.  Code between `<% %>` is run and the return value of code
between `<%= %>` is inserted into the page.

Next, create a teacher and use can.view to render the template:

    var teacher = {
      name : "<NAME>",
      grade : "a",
      students : [
        {name : "Suzy"},
        {name : "Payal"},
        {name : "Curtis"},
        {name : "Alexis"}
      ]
    };
    
    document.getElementById('teacher')
      .appendChild( can.view("teacherEJS", teacher) )

This results in HTML like:

    <div id='teachers'>
      <h2 class='good'>
        Mr. Smith
      </h2>

      <ul>
         <li>Suzy</li>
         <li>Payal</li>
         <li>Curtis</li>
         <li>Alexis</li>
      </ul>
    </div>
    
This is nice, but what if we change properties of the teacher?

## Basic Live Binding Example

EJS sets up live templating binding when a [can.Observe]'s properties are read 
via [can.Observe::attr attr] within a magic tag.  To make this template
respond to changes in the teacher data, first rewrite the template
to use the attr method to read properties and `list( observeList, cb(item, i) )`
to iterate through a list like:

    <script type='text/ejs' id='teacherEJS'>
    
      <h2 class='<%= teacher.attr('grade') < 'c'? "good" : "bad" %>'>
        <%= teacher.attr('name') %>
      </h2>
      
      <ul>
        <% list(teacher.students, function(student){ %>
          <li><%= student.attr('name') %></li>
        <% }) %>
      </ul>
      
    </script>

__Note:__ The end of this page discusses why using `list` is 
helpful, but it does nothing fancy.

Next, turn your teacher into a `new can.Observe(object)` and pass
that to `can.view`:

    var teacher = can.Observe({
      name : "<NAME>",
      grade : "a"
      students : [
        {name : "Suzy"},<commit_msg>Fixed several errors in examples.<commit_after>@constructor can.EJS
@parent canjs

EJS provides __live__ ERB-style client-side templates. Use EJS 
with [can.view] and for live templating use EJS with [can.Observe].

## Basic Example

The following renders a Teacher's name and students into an element.  First, 
create a teacher template in a script tag like:

    <script type='text/ejs' id='teacherEJS'>
    
      <h2 class='<%= teacher.grade < 'c'? "good" : "bad" %>'>
        <%= teacher.name %>
      </h2>
      
      <ul>
        <% for(var i =0; i< teacher.students.length; i++){ %>
          <li><%= teacher.students[i].name %></li>
        <% } %>
      </ul>
      
    </script>

Notice the magic tags?  Those are things that look like `<% %>` and 
`<%= %>`.  Code between `<% %>` is run and the return value of code
between `<%= %>` is inserted into the page.

Next, create a teacher and use can.view to render the template:

    var teacher = {
      name : "<NAME>",
      grade : "a",
      students : [
        {name : "Suzy"},
        {name : "Payal"},
        {name : "Curtis"},
        {name : "Alexis"}
      ]
    };
    
    document.getElementById('teacher')
      .appendChild( can.view("teacherEJS", teacher) )

This results in HTML like:

    <div id='teachers'>
      <h2 class='good'>
        Mr. Smith
      </h2>

      <ul>
         <li>Suzy</li>
         <li>Payal</li>
         <li>Curtis</li>
         <li>Alexis</li>
      </ul>
    </div>
    
This is nice, but what if we change properties of the teacher?

## Basic Live Binding Example

EJS sets up live templating binding when a [can.Observe]'s properties are read 
via [can.Observe::attr attr] within a magic tag.  To make this template
respond to changes in the teacher data, first rewrite the template
to use the attr method to read properties and `list( observeList, cb(item, i) )`
to iterate through a list like:

    <script type='text/ejs' id='teacherEJS'>
    
      <h2 class='<%= teacher.attr('grade') < 'c'? "good" : "bad" %>'>
        <%= teacher.attr('name') %>
      </h2>
      
      <ul>
        <% list(teacher.students, function(student){ %>
          <li><%= student.attr('name') %></li>
        <% }) %>
      </ul>
      
    </script>

__Note:__ The end of this page discusses why using `list` is 
helpful, but it does nothing fancy.

Next, turn your teacher into a `new can.Observe(object)` and pass
that to `can.view`:

    var teacher = new can.Observe({
      name : "<NAME>",
      grade : "a",
      students : [
        {name : "Suzy"},
{'fraction_non_alphanumeric': 0.1481044981339619, 'fraction_numerical': 0.0027499508937340405, 'mean_word_length': 2.356624917600527, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 95, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3343028', 'n_tokens_mistral': 1712, 'n_tokens_neox': 1633, 'n_words': 548}