MarionetteLabs / marionette-cookbook

(Work in progress) Examples of common UI patterns with Marionette.js
MIT License
106 stars 20 forks source link

any room for coffeescript implementations? #31

Open moimikey opened 10 years ago

moimikey commented 10 years ago

i have a ton i'm sure...

moimikey commented 10 years ago

this might be the most horrible example ever.... but for example with behaviors, I actually put it in the form of its own sub app:

@MM.module 'BehaviorsApp', (BehaviorsApp, App, Backbone, Marionette, $, _) ->

  @on 'start', ->
    BehaviorsApp.Behaviors = @behaviors = {}

    Marionette.Behaviors.behaviorsLookup = ->
      BehaviorsApp.Behaviors.behaviors

    BehaviorsApp.Behaviors.behaviors =
      MultiSelect: App.Behaviors.MultiSelect

to which I subsequently create a behavior such as one I made for multi selecting models using jquery-ui located in app/scripts/behaviors in the form of:

@MM.module 'Behaviors', (Behaviors, App, Backbone, Marionette, $, _) ->

  class Behaviors.MultiSelect extends Marionette.Behavior

    onShow: ->
      @mediaType = App.request('get:header:mediaType')

      if $.ui.selectable?
        @selected = []

        App.vent.on 'hid:context:menu', =>
          if @$el.hasClass 'ui-selectable'
            @$el.find('.ui-selected').removeClass('ui-selectee ui-selected')

        @setupSelectable()

    setupSelectable: ->
      @$el?.selectable
        delay:  50
        filter: '.media-item'
        appendTo: App.container.el

        selected: (evt, ui) =>
          cid = $(ui.selected).data('cid')

          if @mediaType is 'music'
            @view.children.each (view) =>
              model = view.tracks.children.findByModelCid(cid)
              @selected.push model if model?
          else
            if (model = @view.children.findByModelCid(cid)?.model)?
              @selected.push model if model?
            else
              @view.children.each (view) =>
                model = view.model?.mediaItems?._byId[cid]
                @selected.push model if model?

        stop: (evt) =>
          $(evt.target).one 'click.anywhere', (e) ->
            e.stopPropagation()

          if @selected.length isnt 0
            App.vent.trigger 'show:context:menu', models: @selected, evt: evt

        start: =>
          @selected.length = 0

obviously the above behavior isn't example ready... but that's the gist of how I've utilized them.

jamesplease commented 10 years ago

I'm not interested in adding CoffeeScript to the cookbook. You could compile it to Javascript though!