【发布时间】：2016-11-21 07:11:34
【问题描述】：
我正在使用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——所有这些都有不同的元素，我想介绍一下。所以我需要为所有不同的动作/视图指定不同的元素。
我也只想在以下情况下触发游览：
- 用户第一次登录（可以通过
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 文件中。
【问题讨论】：
-
您有什么问题？我看到您已经拥有全部或大部分代码。您尝试过什么或遇到过什么问题？
-
@marczking 我的问题是它根本不起作用。我有所有的代码，但是当页面完成加载时，Tour 并没有像你期望的那样执行。我错过了什么？或者我可以尝试什么？我在 JS 控制台中没有看到任何错误。
-
你能用基本结构做一个小提琴或codepen吗？我的猜测是，这不是直接的 rails 问题。当然，您需要正确填充视图，但我认为您应该能够仅使用 HTML 和 JavaScript 将其精简为基础。今天晚些时候我也会试着看看。但如果你有一支笔左右，请随意链接它;）
-
什么是 turbolinks，它有加载事件吗？也许您可以尝试在文档加载后开始游览？
-
我可以看到这种破坏的一种方法是如果您使用jquery-turbolinks gem。您是否在
turbolinks:load块中console.log('something')以确保其行为符合预期？
标签： ruby-on-rails twitter-bootstrap asset-pipeline ruby-on-rails-5 bootstrap-tour