Views

“At a technical level, a Backbone view is simply a JavaScript object that manages a specific DOM element and its descendants. If view A manages DOM element A and its descendants, no other view should touch DOM element A or its descendants. That’s view A’s domain. If you want to change the DOM elements of view A, go through view A’s API.” aaronhardy

Views properties

• el – Each view has a DOM element it is managing. el is a reference to this DOM element. It can be set from the parent or it can be created and set from within the view itself.
• $el – A jQuery-wrapped version of el.
• model – Each view will likely be dealing with a model specified using the model property.
• collection – Or the view will be dealing with a collection specified using the collection property.
• tagName – default: div (will be used to create the DOM element el)
• className – If the view automatically creates a DOM element because el wasn’t set through the constructor, the automatically-created DOM element will receive a CSS class name as specified by the className property.

Guidelines

• return this in the render method for method chaining

Event delegation

SimpleView = view.extend
  # map events to methods
  events: {
    "click": "fancy",
  }

  fancy: (event) ->
    console.log "view clicked."

View

view = require("./view")

SimpleView = view.extend

  initialize: (data) ->
    @el.setAttribute "class", "simple_view"

  render: ->
    @el.textContent = "Represent the model"
    @

module.exports = SimpleView

View with subviews

view = require("./view")
pluginator = require("./pluginator")

ExtendedView = view.extend

  initialize: (data) ->
    @el.setAttribute "class", "extended_view"
    @addView "a", new AView()
    @addView "b", new BView()

  render: ->
    @renderSubviews()
    @

# mix and shake
pluginator.mixin ExtendedView::
module.exports = RowView