Show a List in a Template

To make an Array observable, pass it to can.List.

var people = new can.List([
    {firstname: "John", lastname: "Doe"},
    {firstname: "Emily", lastname: "Dickinson"}
]);

var frag = can.view("app-template", {people: people})
$("#my-app").html(frag);

To show a list of data within a mustache template, use the #each operator.

<ul>
{{#each people}}
  <li>
    {{lastname}}, {{firstname}}
  </li>
{{/each}}
</ul>

Inside the #each block, the attributes are scoped to individual objects in the list of people.

To make changes to the list, use an Array method such as push or pop.

// adds a new person
people.push({firstname: "Paul", lastname: "Newman"})
// removes the last person
people.pop()