在 rails 中的 javascript 中添加大块 HTML 的更简洁的方法

Question

我有一个 rails 应用程序和 angular，我需要填充一大块 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') %>

但将它放在资产文件夹中，因此渲染功能无法正常工作。我想知道有没有更好的方法。

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

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

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

现在我可以调用 angular 中的工厂并获取 header 值。

在 rails 中的 javascript 中添加大块 HTML 的更简洁的方法

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

html

javascript

ruby-on-rails

erb