nested_list.coffee

define [
    'vendor/backbone',
    'vendor/mustache'
  ], (_Backbone, Mustache) ->
    NestedSelect = {}
    
    NestedSelect.Controller = Backbone.Model.extend

    NestedSelect.View = Backbone.View.extend
      events:
        "change .level": 'selectLevel'
      template: Mustache.compile("""
          <select data-level="{{level}}" class="level">
            <option></option>
            {{#content}}
              <option value="{{.}}">{{.}}</option>
            {{/content}}
          </select>
        """)

      pathContent: ->
        values = @content
        _.each @path[0...@level], (key) ->
          found = _.find values, (row) ->
            row[0] == key
          values = if found isnt undefined then found[1] else []
        _.map values, (row) -> if _.isArray(row) then row[0] else row

      initialize: (options) ->
        @content = options.content
        @level = 0
        @path = []

      selectLevel: (e) ->
        name = $(e.target).val()
        if name == ''
          @level--
          @removeLevel()
        else
          level = parseInt $(e.target).data('level')
          if level >= @path.length
            @path.push name
          else
            @path[level] = name
          @level = level + 1
          @renderLevel()
      
      removeLevel: ->
        @$el.find("[data-level=#{@level}]").remove()

      renderLevel: ->
        content = @pathContent()
        unless _.isEmpty(content)
          html = @template(level: @level, content: content)
          if select = @$el.find("[data-level=#{@level}]")[0]
            $(select).html(html)
          else
            @$el.append html
        
      render: ->
        @renderLevel()

    (options) ->
      view = new NestedSelect.View(options)
      view.render()