example implementations for marionett.js

[fluxsaas]

Hey

it would be great if you could add some examples / best practice on how to use backbone.epoxy with framewoks like marionett.js to your readme. i think that would help a lot to get started.

here is my approach (thanks to Dan), which is kind of complex... but you can strip it down further:

initiate a new user form view with:

view = new App.UserApp.Fields.View(model: user)

App.UserApp.Fields.View is a specific form view for the user scope and extends from the the common used App.Views.FieldsView

@App.module "UserApp.Fields", (Fields, App, Backbone, Marionette, $, _) ->

  class Fields.View extends App.Views.FieldsView
    template: "user/_fields/user_fields"
    className: "user-form"

    bindings:
      "input.first-name": "value:first_name,events:['keyup']"
      "span.first-name": "text:first_name"

We define App.Views.FieldsView to be used in our app which includes backbone.epoxy fuctionality.

@App.module "Views", (Views, App, Backbone, Marionette, $, _) ->

  class Views.FieldsView extends Marionette.ItemView

    constructor: ->
      Backbone.Marionette.ItemView.prototype.constructor.apply(@, arguments)
      @epoxify()

    epoxify: ->
      _.defaults @, Backbone.Epoxy.View::
      @listenTo @, "ui:bind", @applyBindings
      @listenTo @, "before:close", @removeBindings

    bindUIElements: ->
      @trigger "ui:bind"
      Marionette.View::bindUIElements.apply this, arguments

i'm going to use Backbone.Epoxy only in my form views, that's why i have specific Fields.View. You could easily extend a base Views.ItemViewto include epoxy in all of your itemviews.

i think another solution would be to overwrite the marionette.view.js to extend directly from Backbone.Epoxy.View. Not sure if that would work...

another idea could be to provide a Backbone.Marionette.EpoxyView class, similar to spin.js provides a jquery plugin. an example is Marionette.BossView.js which would be as simple as:

class Backbone.Marionette.EpoxyView extends Backbone.Marionette.ItemView

  constructor: ->
    Backbone.Marionette.ItemView.prototype.constructor.apply(@, arguments)
    @epoxify()

  epoxify: ->
    _.defaults @, Backbone.Epoxy.View::
    @listenTo @, "ui:bind", @applyBindings
    @listenTo @, "before:close", @removeBindings

  bindUIElements: ->
    @trigger "ui:bind"
    Marionette.View::bindUIElements.apply this, arguments

Which can be used as: new Backbone.Marionette.EpoxyView() (i did not test this, but it should work...)

Maybe you can give me some feedback in case i missed something...

Same for Backbone.Model if you can't extend from Backbone.Epoxy.Model directly

class Model.Base extends Supermodel.Model

    constructor: ->
      # make sure you call **constructor** from extended class if overridden
      Supermodel.Model.prototype.constructor.apply(@, arguments)
      @epoxify()

    epoxify: ->
      Backbone.Epoxy.Model.mixin(@)
      @initComputeds()