CanJS simple control example

article.ejs

<div <%= (el) -> can.data(el,'article',this) %> class="hidden article article-<%= this.id %>" <%= (el) -> el.fadeIn()%> >
  <%= this.name %>
</div>

articles.ejs

<div class="articles">
  <% can.each(this.articles, function(i, article) { %>
  <%== can.view.render('article.ejs', article) %>
  <% } %>
</div>

articles_control.js

ArticlesControl = can.Control({
  init: function() {
    var self = this;

    can.view('articles.mustache', {
      articles: Article.findAll()
    }).done(function(frag) {
      self.element.html(frag)
    })
  },
  ".article click": function(el, ev) {
    ev.preventDefault();
    can.data(el, 'article').destroy()
  }
  // Tricky thing with observers and events :)
  "{Article} created": function(model, event, article) {
    this.element.find('articles').append(can.view('article.ejs', article))
  },
  // Tricky thing with observers and events :)
  "{Article} destroyed": function(model, event, article) {
    // Now you are 100% sure that server respond with success
    this.element.find('.article-' + article.id).fadeOut(function(el) {
      el.remove()
    })
  }
})