如何根据用户正在进行的操作触发和配置 Bootstrap 游览？

Question

我正在使用 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 -- 所有这些都有不同的元素，我想在巡演中介绍这些元素。所以我需要为所有不同的 actions/views 指定不同的元素。

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

用户第一次登录（可由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 文件中。

Answer 1

新答案

阅读 Bootstrap Tour docs 后，听起来您的问题可能是 Bootstrap 游览在您的本地存储中保存 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 文件没有以正确的顺序或方式包含。最近对 turbolinks 的 Rails 5 更改使这变得更加复杂。在 rails 的快速原型制作世界中，这是我转向轻量级 gem 进行资产包含的时候。对于您的情况，我建议：

摆脱：

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

Answer 2

所以我没有看到你包括 bootstrap.js，所以你可能错过了。在使用 bootstrap-tour.js 之前包含它，因为它依赖于 bootstrap.js。查看 overview and docs.

~~我做了一个非常基本的笔，但总是遇到这个问题：$element.popover not defined。在包括 bootstrap.js 之后，游览很好地初始化（没有样式，但工作）。~~ 这是我的无样式，但工作 pen （基于您提供的代码）。

编辑

所以它在我的 pen 上起作用。但是一旦您单击 "End tour" 并重新加载页面，游览将不会重新开始。所以它正在设置一个 cookie，因此不会重新开始游览。删除 cookie，游览将再次启动。

所以我认为这可能一直是您的问题。导览应该可以正常运行，但在您结束导览后它不会重新开始。

这是因为您还没有意识到哪里出了问题，因为一切看起来都是正确的，甚至您的代码本身也是如此！

如何根据用户正在进行的操作触发和配置 Bootstrap 游览？

How do I trigger & configure Bootstrap Tour based on the actions the user is on?

ruby-on-rails

asset-pipeline

twitter-bootstrap

bootstrap-tour

ruby-on-rails-5

新答案

原答案

摆脱：

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

编辑