Q:

Implications on Speed/Performance When Producing Multiple HTML Templates from Javascript Classes

I'm building a travel website with Ruby on Rails 4 that makes heavy use of Javascript (or Coffeescript) for Google Maps and other APIs.  This involves making a single call to the server, creating a javascript object with the results, then immediately rendering some HTML.  A bit later, I will need to render different HTML using the same data.  
A typical use case might be:

User searches for transportation between two different destinations
Coffeescript sends ajax post request to rails server
Rails server returns a JSON object with the results.  Let's call this searchResults, which is an array of routes (e.g. searchResults['routes'][0]['path'] or searchResults['routes'][0]['price'])
The application immediately renders the results of this search as HTML (format 1)
Later, based on user action, the application must render data about one of the routes in the search result.  This action requires rendering of different HTML than in step 4 (format 2). 

Currently, in Step 3, I'm creating an instance of a SearchResults class in Coffeescript:
#holds all of the information for a single the transporation search call
class TransportationSearch
  constructor: (oLat, oLng, dLat, dLng, oName, dName) ->
    @origin = oName
    @destination = dName
    response = @search(oLat, oLng, dLat, dLng).responseJSON
    @longestRoute = response.longestRoute #in minutes
    @routes = response.routes

The reason I'm creating a Coffeescript class is because I'm trying to avoid hitting the server again.  That is slow and I have an API limits to consider.  My question is about steps 4 and 5.  I've come across two different methods of doing what I need and wondering what the implications of each on speed/performance are. 
Method 1: Cloning Hidden Div
I have methods in TransportationSearch that clone a hidden div, set the attributes, and insert it into the DOM:
renderFormatOne: ->
    for route in routes
      content = $('.div-one-template').clone().removeClass('hidden')

      #...sets content for template.  For example:
      content.find('.price').html(route['price'])

      #Insert template into Dom
      $('#results-one').append(content)

renderFormatTwo: ->
    ...

Method 2: Using AJAX/Rails to Render the HTML
The other approach is to have house the HTML templates in a Rails partial, then use AJAX to send data to the controller and render the result. 
Coffeescript:
  #sets the content of the side-menu with the HTML from transportation call
  showTransportation: (searchResults) =>
    #first, get HTML
    $.ajax '/segments/side_menu_transportation',
      type: 'post'
      data:
        searchResults: JSON.stringify(searchResults)
      success: (data) ->
        $('#add-transport-box').html(data)
        return true
      error: ->
        alert 'passDestinationToTransportation Unsuccessful'
        return

    @show()

Controller:
def side_menu_transportation
  @searchResults = JSON.parse(params[:searchResults])
  render partial: 'trips/transport_search'
end

Method 1 seems a little sloppy to me as it places a lot of the HTML structure in Coffeescript.  However, speed is my priority and will probably dictate my decision.  I'd prefer to use Method 2, but I'm wondering if the AJAX POST request is slow even if I'm not hitting my rails server.  
Please let me know the speed / performance implications of these approaches, or if I'm missing something totally obvious :D. 
Thanks in advance!  

A:

I don't think you should be sending data back to server to generate some HTML - if you do wouldn't that be generating frontend on the backend?  Sounds a little bit odd to me.  And it is a no-no from UX point of view because of lower responsiveness of the UI. 
The speed of Javascript should not be a concern for you.  Angular for example renders HTML all the time and unless developer was really sloppy, the impact on browser is not that big.  
The HTML in Javascript.  Well... again, this is frontend, you can't avoid it that much.  But what might work for you is to have interpolated templates rather than copying, traversing and modifying DOM nodes.  Just like this: <some><markup> #{route.price} </markup><some>.  Having it that way would (possibly) reduce number of DOM operations (esp.  costly traversing and lookup) and also would define body of the templates, so you see them full, as they are in one place. 
Btw, it looks like I described what an Angular directive is with this paragraph - did you try to investigate it?  
If you really need to render HTML server side (I advise you to not, but maybe I'm missing something) please don't make user wait for it - how about to render both/few templates at the same time of first call? 
Lastly a hint:
class TransportationSearch
  constructor: (oLat, oLng, dLat, dLng, oName, dName) ->
    @origin = oName
    @destination = dName

is equal to 
class TransportationSearch
  constructor: (oLat, oLng, dLat, dLng, @origin, @destination) ->

