 # model_value = [ { name: 'languages', content: 'C, C++' }, ... ]
 highlights_model_to_view = (model_value) ->
   model_value = [{name:'', content:''}] if model_value.length == 0
-  ( "<tr><td class='highlight-name'>#{highlight.name}</td><td class='highlight-content'>#{highlight.content}</td></tr>" for highlight in model_value ).join()
-  
+  ( build_highlight_row(highlight) for highlight in model_value ).join()
+  
+build_highlight_row = (highlight) ->
+  "<tr>" +
+  "<td class='#{HIGHLIGHT_NAME_CLASS}'>#{highlight.name}</td>" +
+  "<td class='#{HIGHLIGHT_CONTENT_CLASS}'>#{highlight.content}</td>" +
+  "</tr>"
+
 highlights_view_to_model = ->
   # TODO: clean this up
   list = []

  user_highlights().on 'input', ->
    set_dirty(true)
    
  $('#user-highlights').on 'keypress', '.highlight-name', (event) ->
    return true unless event.which == 13
    $(this).next().focus()
    return false

  $('#user-highlights').on 'keypress', '.highlight-content', (event) ->
    return true unless event.which == 13
    current_row = $(this).closest('tr')
    new_row = current_row.clone(true)

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/


#
# constants
#

HIGHLIGHT_NAME_CLASS = 'highlight-name'
HIGHLIGHT_CONTENT_CLASS = 'highlight-content'


#
