declarative syntax for wrapping important selectors behind functions
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
specs
README.mkd
backbone.view-fields.js

README.mkd

View Fields

Working with backbone on some non trivial projects, I found that views should really encapsulate important bits behind functions, to isolate the rest of the view code from changes to selectors (i.e. a change to the html means a change to the view code in a single place).

I really like the declarative syntax for view events, and wanted similar for what are essentially view fields.

Examples

Foo = Backbone.View.extend({
  fields: {
    header: '.header',
    addButton: '.header button:first',
  },

  initialize: function() {
    ViewFields.init(this)
  }
})

var view = Foo.new()

view.fields.header() // returns view.$('.header')
view.fields.addButton() // returns view.$('.header button:first')

view.fields.add({new: 'span.new'})
view.fields.new() // returns view.$('span.new')