ruby-on-rails - 如何根据用户正在进行的操作触发和配置 Bootstrap Tour？

我正在使用Bootstrap Tour而且设置非常简单。

这些是说明:

// Instance the tour
var tour = new Tour({
  steps: [
  {
    element: "#my-element",
    title: "Title of my step",
    content: "Content of my step"
  },
  {
    element: "#my-other-element",
    title: "Title of my step",
    content: "Content of my step"
  }
]});

// Initialize the tour
tour.init();

// Start the tour
tour.start();

就我而言，我有一个 Profiles#Index , Profiles#Show和Dashboard#Index ——所有这些都有我想在这次巡演中展示的不同元素。所以我需要为所有不同的操作/ View 指定不同的元素。

我也只想在以下条件下触发游览:

用户首次登录的时间(可以通过 current_user.sign_in_count < 2 确定)。
仅在用户首次登录时生效，而不是在刷新页面时生效。

我正在使用 Devise，仅供引用。

我现在将默认的 JS 放入我的 app/assets/javascripts/profiles.js 中。我是否应该将其移至其他地方才能实现上述条件？

编辑 1

实际上，我以为它会正常工作，但我根本无法让它工作。

我的 Profiles#Show页面并且游览不会触发。这是它的设置方式:

这是我的application.html.erb :

<%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css", 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js", 'application', 'data-turbolinks-track': 'reload' %>

这是我的application.js :

$(document).on('turbolinks:load', function() {
  var tour = new Tour({
    backdrop: true,
    steps: [
    {
      element: "#ratings-controls",
      title: "Ratings Controls",
      content: "Here you can rate this recruit so you can easily remember how they performed."
    },
    {
      element: "div.action-buttons a#favorite-btn",
      title: "Favorite",
      content: "Here you can easily favorite a player"
    },
    {
      element: "a.my-favorites",
      title: "My Favorites",
      content: "After you favorite a player, they automagically get added to your list of favorites -- which you can easily view here."
    }
  ]});

  // Initialize the tour
  tour.init();

  // Start the tour
  tour.start();
});

我最初在我的 app/assets/javascripts/profiles.js 中有这个但当它停止工作时，我将其移至 application.js只是为了确保其他东西不会覆盖它。

在我的Profiles#Show ，我肯定拥有所有这 3 个元素，正如您在下面呈现的 HTML 中看到的那样:

<div id="ratings-controls" class="profile-data">
  <table class="table table-condensed">
      <tbody>
      <tr>
          <td>
              <p>
                <button type="button" class="btn btn-success m-r-sm slider-step-value" id="slider-step-value-speed-wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b" data-speed-value="0">0</button>
                Speed
              </p>
              <div id="slider-speed" class="slider"></div>
          </td>
          <td>
              <p>
                <button type="button" class="btn btn-info m-r-sm slider-step-value" id="slider-step-value-tackling-wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b" data-tackling-value="0">0</button>
                Tackling
              </p>
              <div id="slider-tackling" class="slider"></div>
          </td>
      </tr>
      <tr>
          <td>
              <p>
                <button type="button" class="btn btn-primary m-r-sm slider-step-value" id="slider-step-value-dribbling-wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b" data-dribbling-value="0">0</button>
                Dribbling
              </p>
              <div id="slider-dribbling" class="slider"></div>
          </td>
          <td>
              <p>
                <button type="button" class="btn btn-warning m-r-sm slider-step-value" id="slider-step-value-passing-wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b" data-passing-value="0">0</button>
                Passing
              </p>
              <div id="slider-passing" class="slider"></div>
          </td>
      </tr>
      </tbody>
  </table>
</div>

<div class="action-buttons">
  <a class="btn btn-xs btn-success" id="favorite-btn-29" data-remote="true" rel="nofollow" data-method="post" href="/profiles/wacky-dip-st-george-s-college-bcdda202-c498-4baa-867d-200662fc785b/favorite"><i class='fa fa-thumbs-up'></i> Favorite</a>
</div>

<a class="my-favorites" href="/profiles?filter=favorites">
  <i class="fa fa-list"></i> My Favorites
</a>

此外，Bootstrap Tour CSS 和 JS 也包含在我渲染的 HTML 中。

所以第一个问题是......我该如何让它工作？然后我就可以联系其他人了。

编辑2

我在我的 application.js 中添加了一些调试语句这些是结果。

这就是我的 application.js现在看起来:

$(document).on('turbolinks:load', function() {
  console.log('Turblinks Has Loaded -- This is Before Tour is Initialized.')
  var tour = new Tour({
    backdrop: true,
    steps: [
    {
      element: "#ratings-controls",
      title: "Ratings Controls",
      content: "Here you can rate this recruit so you can easily remember how they performed."
    },
    {
      element: "div.action-buttons a#favorite-btn",
      title: "Favorite",
      content: "Here you can easily favorite a player"
    },
    {
      element: "a.my-favorites",
      title: "My Favorites",
      content: "After you favorite a player, they automagically get added to your list of favorites -- which you can easily view here."
    }
  ]});

  // Initialize the tour
  tour.init();
  console.log('This is after Tour has been initialized.')

  // Start the tour
  tour.start();
  console.log('This is after Tour has been started.')
});


Turblinks Has Loaded -- This is Before Tour is Initialized.
bootstrap-tour.min.js:22 Uncaught TypeError: Cannot read property 'extend' of undefined(…)

什么可能导致此问题以及如何进一步调试它？该错误似乎在 bootstrap-tour.min.js 内文件。

最佳答案

新答案

阅读 Bootstrap Tour docs 后听起来您的问题可能是 Bootstraptour 在本地存储中保存 cookie 以跟踪用户在游览中的进度的方式。换句话说，游览无法开始的原因是 Bootstrap 游览会在您的浏览器本地存储中查找并认为您已经完成。因此，要解决此问题，您有三种选择，具体取决于您的具体情况:

强制 Bootstrap 游览不使用存储

// Instance the tour
var tour = new Tour({
  storage: false,
  steps: [ ...]
]});

或

强制开始游览

// Start the tour
tour.start(true);

或

强制重新启动游览

// Restart the tour
tour.restart();

原始答案

我根据上面提供的注释和一些调试做了一些假设，看起来您的 javascript 文件没有以正确的顺序或方式包含。最近 Rails 5 对 Turbolink 的更改使情况变得更加复杂。在 Rails 的快速原型(prototype)世界中，这是我转向轻量级 gem 来包含 Assets 的时候。对于你的情况，我建议:

摆脱:

application.html.erb

<%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css", 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js", 'application', 'data-turbolinks-track': 'reload' %>

并安装 bootstrap-tour-rails gem像这样:

Gemfile

gem 'bootstrap-tour-rails'

application.js

//= require bootstrap-tour

application.css

*= require bootstrap-tour

<罢工>

关于ruby-on-rails - 如何根据用户正在进行的操作触发和配置 Bootstrap Tour？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40714633/

ruby-on-rails - 如何根据用户正在进行的操作触发和配置 Bootstrap Tour？

新答案

原始答案

摆脱:

并安装 bootstrap-tour-rails gem像这样:

上一篇：apache-kafka - Kafka的topic和partition的命名规范应该是什么？

下一篇：ruby-on-rails - 如何维护 Rails 中的状态？