如何使用 Ruby on Rails 和 Bootstrap 3 初始化 Bootstrap Tagsinput答案

【问题标题】：How do I initialize Bootstrap Tagsinput with Ruby on Rails and Bootstrap 3如何使用 Ruby on Rails 和 Bootstrap 3 初始化 Bootstrap Tagsinput
【发布时间】：2014-10-31 05:36:52
【问题描述】：

背景和工具：

我在 Rails 中使用Bootstrap Tags Input jQuery plugin。

我将插件存储为vendor/assets/javascripts/bootstrap-tagsinput.js，并将其样式表存储为vendor/assets/stylesheets/bootstrap-tagsinput.css。

我正在一个数字图书馆 Rails 应用程序中标记我的所有书籍。

问题：

如果我直接导航到 Book#new 或 Book#edit，标签将按项目演示页面中的预期工作。

但是，如果我通过单击另一个页面的链接导航到 Books#edit 或 Books#new 页面，那么我的文本输入将被格式化为典型的 html 文本输入，并显示以逗号分隔的字符串 science,fiction,good,short。

更多信息：我的输入如下所示：

<input class="form-control tagsinput" data-role="tagsinput" id="books_tags"
name="books[tags]" type="text" value="science,fiction,good,short">

bootstrap-tagsinput.js 文件的底部有这些行：

  /**
   * Initialize tagsinput behaviour on inputs and selects which have
   * data-role=tagsinput
   */
  $(function() {
    $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
  });
})(window.jQuery);

这个初始化似乎是由 Rails 运行的，并在直接输入 URL 位置时将其 JavaScript 魔法应用于<input>，但在通过页面上的链接导航时则不然。

问题：

从另一个页面导航时如何让初始化运行？

【问题讨论】：

可能是 turbolinks 问题。

标签： javascript jquery ruby-on-rails-4 twitter-bootstrap-3 bootstrap-tags-input

【解决方案1】：

将初始化代码放在app/assets 而不是vendor/assets 将在页面加载时运行初始化。 bootstrap-tagsinput.js 库仍将通过vendor/assets 加载，但初始化将需要通过app/assets 运行。

从vendor/assets/javascripts/bootstrap-tagsinput.js 中删除这些行：

  $(function() {
    $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
  });

并将它们放在资产管道内的 JS 文件中：app/assets/javascripts/books.js。

  $(function() {
    $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
  });

移动内容将确保初始化运行。不要简单地复制这些行，否则初始化将运行两次 - 这真的会弄乱你漂亮的标签输入插件的外观。

【讨论】：