gxbsst
11/23/2012 - 1:13 PM

添加品酒辞颜色/风味特征..

添加品酒辞颜色/风味特征..

# =====================================================
#* Backbone Js  添加品酒辞的颜色/风味特征
#*    by Weston, 20th NOV 2012
#* ------------------------------
#* Usage:
#* 1. 先在模板添加, 参考: note/edit_seond_html.erb
# 2.如下为颜色, 但要注意: link 的参数和 ID
    # <%= hidden_field_tag :color, '', :id => 'select_color_input' %>
    #<%= link_to color_notes_path(:model => 'color'), :remote => true, :class => "btn_gray", :id => :select_color do %>
    #<span>选择颜色</span>
    #<% end %>
    #</p>
    #<ul class="feature" id="color_outer">
    #
    #</ul>
#  3. 参考 notes_controller 的 action 及 wine_color model 要处理 已经选择的部分
#  4. 注意设置 NoteAppView 的 el
#  5. 运行
#$(document).ready(function(){
#var _ref, collection, sidebarView, traitListView;
#  window.app = (_ref = window.app) != null ? _ref : {};
#  collection = new window.Traits(JSON.parse($('#json').html()));
#  window.app.noteAppView = new NoteAppView({ collection: collection, forModel: $('#for_model').html()  });
#  window.app.noteAppView.render();
#});
#* =====================================================
#

class window.Trait extends Backbone.Model
  defaults: {
  "select":  "",
  "image": ""
  }

  markSelect: ->
    if @.get('select') == undefined || @.get('select') == "" || @.get('select') == null
      @.set({'select': 'rg'})
    else
      @cancleSelect()

  cancleSelect: ->
    @.set({'select': ''})

class window.Traits extends Backbone.Collection
  model: window.Trait

  # 颜色是单选
  cancleAllSelected: ->
    @.forEach (model) =>
      model.cancleSelect()

  search: (word) ->
    pattern = new RegExp(word, 'i' )
    @.filter (t) =>
      (pattern.test t.get('name_en')) || (pattern.test t.get('name_zh'))


jQuery ->
  _.templateSettings = {
  interpolate: /\<\@\=(.+?)\@\>/g,
  evaluate: /\<\@(.+?)\@\>/g
  }

  class window.TraitItemView extends Backbone.View
    tagName: 'li'

    template: _.template($("#trait_item_template").html())

    render: ->
      $(@el).html @template @model.toJSON()
      $(@tagName).css('overflow', 'auto');
      @

    initialize: ->
      _.bindAll(@, 'render')
      @model.bind('change', @render, @)
      @model.bind('destroy', @remove, @)

    events:
          'click li p a': 'select'
    select: ->
      # 如果是颜色,只能单选
      if @options.forModel == 'color'
        @model.collection.cancleAllSelected()
      @model.markSelect()

  class window.TraitItemDisplayView extends window.TraitItemView
    template: _.template($("#trait_item_display_template").html())

    events:
        'click a.remove': 'remove'

    remove: ->
      @model.cancleSelect()
      $(@.el).remove()
      n = new window.NoteAppView collection: @model.collection, forModel: @options.forModel
      n.save()
#      selectLink = '#select_' + @options.forModel
#      n.addParamsToUrl(@model.collection, selectLink)

  class window.TraitListView extends Backbone.View
    template: _.template($('#trait_list_template').html())

    initialize: ->
      _.bindAll(@, 'render')

    render: ->
      $(@el).html @template {}
      @collection.forEach (model) =>
       traitItemView = new TraitItemView  model:model, forModel: @options.forModel
       @.$('ul').append(traitItemView.render().el)
      $("#traits_container").html(@el)
      @

  class window.SideBarView extends Backbone.View
      el: '#feature_catalog'
      events:
        'click li a': 'reloadTraits'

      reloadTraits: (event) ->
        e = event.target
        @toggleClassName(e)
        parent_id = parseInt(e.getAttribute('data-value'))
        result = @collection.where({parent_id: parent_id})
        if parent_id == 0
          v = new TraitListView({collection: @collection, forModel:@options.forModel})
        else
          v = new TraitListView({collection: result, forModel:@options.forModel})
        v.render()

      toggleClassName: (e) ->
        _.each @.$("li"), (li) =>
          $(li).removeClass('current')
        $(e.parentNode).addClass('current')

  class window.SearchView extends Backbone.View
    el: '#search_trait'

    events:
      'click #search_trait_button': 'search'
      'keypress #search_trait_input': 'search'

    search: (event) ->
      if (event.keyCode is 13 || $(event.target).attr('id') == 'search_trait_button') # ENTER
        value = @.$('#search_trait_input').val()
        if value == ''
          result = @collection
        else
          result = @collection.search(value)
        v = new TraitListView({collection: result, forModel: @options.forModel}).render()

  class window.NoteAppView extends Backbone.View
    el: "#comment_form"

    events:
      'click #save_button .btn_gray_b': 'save'

    initialize: ->
      @.options.sidebarView = new window.SideBarView({collection: @collection, forModel: @options.forModel})
      @.options.traitListView = new window.TraitListView({collection: @collection, forModel: @options.forModel})
      @.options.SearchView = new window.SearchView({collection: @collection, forModel: @options.forModel})

    render: ->
      @.options.traitListView.render()

    save: ->
      outer = "#" + @options.forModel + '_' + 'outer'
      $(outer).html('')
      selectLink = '#select_' + @options.forModel
      input = selectLink + '_input'

      $.fancybox.close()

      result = @collection.where({select: 'rg'})
      @addParamsToUrl(result, selectLink)
      @fillInput(input, result)
      @renderItem(result, outer)

    addParamsToUrl: (params, element) ->
      ids = params.map (p) ->
        p.get('id')
      for_model = '&model=' + @.options.forModel
      params_text = "?ids=" + ids.join(',')
      pathname = $(element)[0].pathname
      href = pathname + params_text + for_model
      $(element).attr('href', href)

    renderItem: (result, element) ->
      $(element).html('')
      result.forEach (model) =>
        traitItemView = new window.TraitItemDisplayView  model:model, forModel: @options.forModel
        $(element).append(traitItemView.render().el)

    fillInput: (element, result) ->
      a = []
      a.push item.get 'key' for item in result
      $(element).attr 'value', a.join(";")