我正在使用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）。 - 仅在用户首次登录时，而不是在他们刷新页面时。
我正在使用设计，仅供参考。
我现在将默认 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文件中。