Header Module

header.js

/**
 *
 * Header
 * 
 * Bound Elements:
 *  - logo
 *
 */ 

;(function (dependencies){
dependencies.push('block');
dependencies.push('text!tmpl/page/header.tmpl');

define(dependencies, 
  function(Block) {
  
  var Header = new Block({
     options: {
      template: arguments[arguments.length-1]
    }
    ,initialize: function (options){
      this.setOptions(options);
      this.parent();
    }
    ,attachEvents:  function () {
      var logo = this.getBound('logo');

      if(logo)
      logo.addEventListener('click', function (e) {
        e.preventDefault();
        alert('clicked');
      });

    }
  });
  return Header;
});

}([]));

header.tmpl

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#" bind="logo"><strong>Blocks</strong>.js</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="divider-vertical"></li>
          <li bind="nav-button"><a href="/">Overview</a></li>
        </ul>
      </div>

      <%=$this.getChild('search') %>
      
    </div>
  </div>
</div>

page.js

        var page = new Page({
          children: {
             header: new Header({
              context: {
                'text':"Welcome to Blocks"
              }
              ,children: {
                search: new MiniSearch({
                  context: {
                    placeholder: "Search the API..."
                  }
                })
              }
             })
            ,footer: new Footer({
              context: {
                'text':"© 2012 Agroism"
              }
            })
          }
        });