thoughts-about-frontend-framework-components.md

Components

Events

• UI event binding (e.g. click, scroll)
• Navigation binding (e.g. hashtag routes)
• Server binding (e.g. /device/activate)

View

• Layout management (e.g. constructs UI with proper templates)
• UI updates/animation (e.g. DOM manipulation)

Controller

• Logic (e.g. application-level code which listens for events and manipulates the view accordingly)
• Global event delegation (e.g. Backbone events)

Our approach?

"Logic Sheet"

.navbar: {
  a: {
    bindings: {
      highlighted: function (newVal) {
        if (newVal) this.addClass('highlighted');
        else this.removeClass('highlighted');
      }
    },
    
    hover: function (e) {
      this.set('highlighted',true);
    },
    
    click: function (e) {
      window.trigger('#'+this.attr('title'));
    }
  }
}

Or

'.navbar': {
  a: {
    '@highlighted': '.highlighted',
    hover: '@highlighted',
    click: '#:title'
  }
}

Classes