title: Chaplin and regions
body: <p>I'd need some help in getting started with node.js and Chaplin </p>
  
  <p>Here's the scenario:</p>
  
  <ul>
  <li>Client comes to my server</li>
  <li>I serve a static html page to the client. In this html there's a div with and id "test"</li>
  <li>This html also launches the chaplin app</li>
  <li>in my chaplin app, I want to be able to attach an event to the "test" div, e.g clicking the div alerts "Yeah"</li>
  </ul>
  
  <p>How does this work?</p>
  
  <p>For what I've managed to learn by trying (as I don't really find any good instructions on this chaplin..) is that I need to create regions where I then put my views into. These views can only have events inside this region. What I don't get is how do I get to use this "test" div as a region?</p>
  
  <p><strong>server</strong></p>
  
  <p>app.js</p>
  
  <pre><code>var express = require('express');
  var routes = require('./routes');
  var http = require('http');
  var path = require('path');
  
  var app = express();
  
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
  
  http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
  });
  </code></pre>
  
  <p><strong>Client</strong></p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!--[if IE 8]&gt;    &lt;html class="no-js lt-ie9" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js" lang="en"&gt; &lt;!--&lt;![endif]--&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;link rel="stylesheet" href="/stylesheets/app.css"&gt;
    &lt;script src="/javascripts/vendor.js"&gt;&lt;/script&gt;
    &lt;script src="/javascripts/app.js"&gt;&lt;/script&gt;
    &lt;script&gt;require('initialize');&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="test"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>routes.coffee</p>
  
  <pre><code>module.exports = (match) -&gt;
    match '', 'home#index'
  </code></pre>
  
  <p>home-controller.coffee</p>
  
  <pre><code>Controller = require 'controllers/base/controller'
  HeaderView = require 'views/home/header-view'
  HomePageView = require 'views/home/home-page-view'
  
  module.exports = class HomeController extends Controller
    beforeAction: -&gt;
      super
      @compose 'header', HeaderView, region: 'header'
  
    index: -&gt;
      @view = new HomePageView region: 'main'
  </code></pre>
  
  <p>home-page-view.coffee</p>
  
  <pre><code>View = require 'views/base/view'
  
  module.exports = class HomePageView extends View
      autoRender: true
      className: 'home-page'
      template: require './templates/home'
      events:
          'click "testi"': 'testEvent'
  
      testEvent: (event) -&gt;
          alert "Yeah"
  </code></pre>
  
  <p>Clicking works ok in this HomePageView thing but how could I bind that event to the "test" div in my html, or how could I use already existing divs as regions?</p>