Cleaner way to add large block of HTML in javascript in rails

Question

I have a rails app along with angular, and I need to populate a large block of HTML so that it can fill in default text for textarea tag. Currently what I did was add the text like this

"<div class='navbar navbar-default letter-header hidden-sm hidden-xs'>\n" +
    "  <div class='container'>\n" +
    "    <div class='letter-navbar-header navbar-header'>\n" +
    "      <a href='/'><img src='/assets/logo.png' class='letters-logo navbar-brand'></a>\n" +
    "    </div>\n" +

    "    <div class='navbar-header header-text'>\n" +
    "      <div class='navbar-text'>\n" +
    "        "text" + "\n" +
    "      </div>\n" +
    "    </div>\n" +
    "    <div class='letter-navbar-header navbar-header'>\n" +
    "      <a href='/'>\n" +
    "        <img src='' class='second-logo'>\n" +
    "      </a>\n" +
    "    </div>\n" +
    "    <div class='navbar-header navbar-right'>\n" +
    "      {{ user_login }}" + "\n" +
    "    </div>\n" +
    "  </div>\n" +
    "</div>\n"

I would like to know if there is a cleaner way to do it. I have tried using js.erb file with the render function like this

<%= j render('navbar') %>

but placed it in the asset folder so the render function is not working https://stackoverflow.com/a/8370847/1087841. I would like to know if there is a better way to do it.

[EDIT] The js.erb file is actually an angular factory which has default HTML for the navbar, which then can be used by the angular controller to render default data. The factory file is then also gets added to application.js as a require. this is the textarea that needs default html

<textarea name="t[navigation]" id="input-navigation-bar" ng-model="t.navigation_bar" class="form-control" rows="10"></textarea>

I could have placed the value tag with the default html but it has ng-model so nothing gets displayed. So I created a factory for the default data. Now the factory lives in /assets and has a //= require 'default_html_factory' in application.js.

score 0 · Accepted Answer · answered Jul 07 '17 at 09:56

I finally found a way to do it. In the erb page I added

<script>
  <%= render 'style_factory.js.erb' %>
</script>

and in the factory I added this

this.ngapp.factory('TenantStyle', function() {
  return {
    header: "<%= j render 'navbar' %>"
  }
});

and in the _navbar.html.erb file I added this

<div class="navbar navbar-default letter-header hidden-sm hidden-xs">
  <div class="container">
    <div class="letter-navbar-header navbar-header">
    </div>

    <div class="navbar-header header-text">
      <div class="navbar-text">
      </div>
    </div>
    <div class='letter-navbar-header navbar-header'>
      <a href='/'>
        <img src='' class='second-logo'>
      </a>
    </div>

    <div class="navbar-header navbar-right">
    </div>
  </div>
</div>

and now I can call the factory in angular and get the header value.

Cleaner way to add large block of HTML in javascript in rails

1 Answers1