在rails中的javascript中添加大块HTML的更干净的方法答案

【问题标题】：Cleaner way to add large block of HTML in javascript in rails在rails中的javascript中添加大块HTML的更干净的方法
【发布时间】：2017-07-05 14:52:21
【问题描述】：

我有一个带有 angular 的 rails 应用程序，我需要填充一大块 HTML，以便它可以填充 textarea 标记的默认文本。目前我所做的是添加这样的文字

"<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"

我想知道是否有更清洁的方法。我尝试过使用带有渲染功能的 js.erb 文件，像这样

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

但将其放在资产文件夹中，因此渲染功能无法正常工作https://stackoverflow.com/a/8370847/1087841。我想知道是否有更好的方法。

[编辑] js.erb 文件实际上是一个角度工厂，它具有导航栏的默认 HTML，然后角度控制器可以使用它来呈现默认数据。然后，工厂文件也会根据需要添加到 application.js。这是需要默认 html 的 textarea

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

我可以用默认的 html 放置值标签，但它有 ng-model，所以什么都不会显示。所以我为默认数据创建了一个工厂。现在工厂位于 /assets 并在 application.js 中有一个//= require 'default_html_factory'。

【问题讨论】：

标签： javascript html ruby-on-rails erb

【解决方案1】：

我终于找到了办法。在我添加的erb页面中

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

我在工厂里添加了这个

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

在 _navbar.html.erb 文件中我添加了这个

<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>

现在我可以用角度调用工厂并获取标头值。

【讨论】：