Bind Events To All Text Input Fields In All Backbone Views

I am looking for a way to create global bindings that will span all views within the app, so that I do not have to set up these within each view individually. Bonus points if sugge

Solution 1:

Hi I wrote my tipp in coffe script because it is simpler.

You can use a mechanism similar to ruby mixins. Then create a mixin with your common behaviour. Then mix the concern into a class which extends Backbone.View. Then use your base view class in all places as base for your view classes.

This is the mixesIn underscore function:

_.mixin
  mixesIn: (base, mixins...) ->
    class Mixed extends base
    formixinin mixins by -1forname, method of mixin::
        Mixed::[name] = method
    Mixed

This is your concern:

classInputSupportevents:
    "blur input#myInputText": "_myInputTextBlur""focus input#myInputText": "_myInputTextFocus"

  _myInputTextBlur = ->
    console.error"_myInputTextBlur"
    $(".page-header").css"display", "block"

  _myInputTextFocus = ->
    console.error"_myInputTextFocus"
    $(".page-header").css"display", "none"

This will be your BaseView class:

classBaseViewextends_(Backbone.View).mixesIn InputSupport

Then in each of you specialized view classes you can extend from BaseView class.

classHeaderViewextendsBaseView
...
classSidebarViewextendsBaseView
...
classFooterViewextendsBaseView
  events:
    "blur input#myInputText": "_myInputTextBlur""focus input#myInputText": "_myInputTextFocus""click .someotheButton": 'handleSomeOtherButton'

In the last case you need repeat the events declared in the concern unless you write a more intelligent mixesIn function which merges the two hash... That can be done with _.defaults function easily but in that case you will face a problem with the substraction of events in your descendant classes which will be a smell.