Intro

An unobtrusive way to write and organize your javascript. Logic for each block goes to separate js/coffeescript file.

Examples

HTML

<div class="b-js" onclick="return {name: 'header_navigation'}">
  <a href="#" class="language_selector__change">Change Language</a>
  <div class="language_selector__wrapper" style="display:none;">
    <!-- some content here -->
  </div>

  <a href="#" class="login__link">Login</a>
  <div class="login__dropdown" style="display:none;">
    <!-- some content here -->
  </div>
</div>

JavaScript

APP.block["header_navigation"] = function(el, params) {
  this.element = el;
  this.params = params || {};
}

APP.block["header_navigation"].prototype = {
  init: function(){
    this.initLanguageSelector();
    this.initLoginWindow();
  },

  initLanguageSelector: function(){
    $(".language_selector__change", this.element).live("click", function(){
      $('.language_selector__wrapper', this.element).toggle();
      return false;
    });
  },

  initLoginWindow: function(){
    $(".login__link", this.element).live("click", function(){
      $('.login__dropdown', this.element).toggle();
      return false;
    });
  }
}

CoffeeScript

class APP.block["header_navigation"]
  constructor: (el, params) ->
    @element = el
    @params = params || {}

  init: ->
    @initLanguageSelector()
    @initLoginWindow()

  initLanguageSelector: ->
    $(".language_selector__change", @element).live "click", ->
      $('.language_selector__wrapper', @element).toggle()
      false

  initLoginWindow: ->
    $(".login__link", @element).live "click", ->
      $('.login__dropdown', @element).toggle()
      false

Credits

Suggested by: Leonya, Egze