If you are anything like me your Marionette views might looks something like this:

class Table extends Marionette.ItemView
    ui:
        top: ".top"
        base: ".base"

    events: ->
        "click .top": @knock
        "click .base": @budge

    onShow: ->
      @ui.base.tooltip
        text: "this is the base of the table"

      @ui.top.tooltip
        text: "this is the top of the table"
    budge: -> ...
    knock: -> ...

Let's take a look at that

hash. It allows us to remove hard-coded

DOM

references from methods in the

itemView

But now take a look below at the

events

. We are repeating the same DOM selectors. This is not ideal, because if our DOM markup in the view changes, we have two places to change in our view definition logic. We should DRY this up!

Well, we are in luck, because as of Marionette v1.4.0 this problem was solved for us!

The

hash can now be used from within the

events

hash definition, using a quasi-preprocessor DSL to make it all come together. So our view from before can be reduced to this.

class Table extends Marionette.ItemView
    ui:
        top: ".top"
        base: ".base"

    events: ->
        "click @ui.top": @knock
        "click @ui.base": @budge

As you can see, this is much improved from what we had before and our DOM selectors are no longer repeated.

As an aside, I now find myself defining a

hash for all of my views that use events, even if I do not use the

hash anywhere else. The reason being that I now formalize by convention the

hash as the place where my views create a tight coupling to their template markup.

Sam Saccone, @samccone

DRY up your Views in Backbone Marionette