javascript - 如何使用 Ruby on Rails 和 Bootstrap 3 初始化 Bootstrap Tagsinput

Question

背景和工具:

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

我将插件存储为 vendor/assets/javascripts/bootstrap-tagsinput.js它的样式表为 vendor/assets/stylesheets/bootstrap-tagsinput.css .

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

问题:

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

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

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

<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 运行并将它的 JavaScript 魔法应用到 <input>直接输入 URL 位置时，而不是通过页面上的链接导航时。

问题:

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

Answer 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();
  });

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

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

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