标签: turbolinks

Turbolinks 5 / 水豚 / Rails

我正在努力升级我的 Rails 应用程序以使用 Turbolinks 5 来利用本机包装器。我已经更新了所有的 javascript,并且浏览器和 Android 应用程序中的一切都按预期工作。当我使用 js true 时,我的一些水豚测试遇到了问题。在撰写本文时,我正在使用最新的 capybara (2.11.0)、poltergeist (1.12.0) 和 phantomjs (2.1)。我也尝试过 capybara-webkit 驱动程序,但没有成功。

我似乎遇到问题的是,在 Turbolinks 5 中,所有表单都应远程提交,并且 Turbolinks 知道如何处理请求。我发现使用 Capbara,我的表单在提交后不会重定向,它会保留在同一页面上。我已经做了很多谷歌搜索和反复试验,但还是有一些不足。任何帮助将不胜感激。如果需要更多信息,请告诉我。

  scenario 'user has dispatch permission and valid attributes', js: true do
    sign_in('jdoe')
    page.visit path
    page.fill_in 'contact_text_input', with: 'Jimmy'
    page.select 'Medium - 3 Hours', from: 'Priority'
    page.fill_in 'Created By', with: 'John Doe'
    page.click_button 'Create This'
    save_and_open_page
    expect(page.current_path).to eq("/dispatch")
    expect(page).to have_content('This was created successfully')
  end

  def sign_in(username)
    page.visit '/'
    page.fill_in 'Username', with: username
    page.fill_in 'Password', …
Run Code Online (Sandbox Code Playgroud)

javascript ruby-on-rails capybara turbolinks ruby-on-rails-4

5
推荐指数
1
解决办法
2384
查看次数

使用 Hotwire 广播到多个 Turbo 流

我已经正确连接了 hotwire/turbo,以便对页面上某个位置的单个模型进行增删改查操作,但我也想同时在页面上的不同位置更新同一模型。我以为我可以设置两个流,但它似乎不起作用。

指定目标确实适用于创建操作,具体取决于我如何命名目标,但不适用于更新和销毁。这是我认为应该有效但无效的:

----位置 1(“生物”流)----

<div id="creatures">
  <%= turbo_stream_from "creatures" %>
  <%= turbo_frame_tag "creatures" do %>
    <div>
      <% @creatures.each do |creature| %>
        <div>
          <%= render "creatures/creature", creature: creature %>
        </div>
      <% end %>
    </div>
  <% end %>
</div>
Run Code Online (Sandbox Code Playgroud)

----位置 2(“creatures_main”流)----

<%= turbo_stream_from "creatures_main" %>
<%= turbo_frame_tag "creatures_main" do %>
  <% @creatures.each do |creature| %>
    <div>
      <%= render "creatures/creature", creature: creature %>
    </div>
  <% end %>
<% end %>
Run Code Online (Sandbox Code Playgroud)

---- 常见_creature.html.erb 部分 ----

<%= turbo_frame_tag dom_id(creature) do %>
  <%= link_to creature.name, …
Run Code Online (Sandbox Code Playgroud)

turbolinks ruby-on-rails-6.1 hotwire-rails

5
推荐指数
1
解决办法
3570
查看次数

Rails 6 和 Turbolinks:在加载新的 \&lt;head&gt; 脚本之前触发 'turbolinks:load'

我有一个 Rails 6 项目。当使用 Turbolink 加载页面时,turbolinks:load事件会在 <head> 脚本合并并执行之前触发。这些脚本中的事件监听器永远不会被执行,因为它们是在事件发生后添加的。

例如,布局的 <head> 部分包含以下内容的页面:

    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: 'defer'
    = yield :extra_head
Run Code Online (Sandbox Code Playgroud)

页面顶部是这样的:

- content_for :extra_head do
  = javascript_pack_tag 'club_edit'
Run Code Online (Sandbox Code Playgroud)

生成这个 html:

<script src="/packs/js/application-629a480faedfc40e8948.js" data-turbolinks-track="reload" defer="defer"></script>
<script src="/packs/js/club_edit-8d7d256609de3b852df1.js"></script>
Run Code Online (Sandbox Code Playgroud)

club_edit.js 文件添加一个侦听器来turbolinks:load调用名为init()

document.addEventListener('turbolinks:load', init);
Run Code Online (Sandbox Code Playgroud)

当我“正常”加载页面时,它会按预期工作并且该init()函数会被调用。但是,如果我从 Turbolinks 链接加载它,它会执行 xhr 调用,并turbolinks:load在添加侦听器之前触发事件。

我应该做什么来确保init()函数以任何一种方式被调用?

javascript ruby-on-rails turbolinks

5
推荐指数
0
解决办法
897
查看次数

Facebook SDK和rails 4 Turbolinks

我很难尝试将javascript Facebook SDK加载到我的rails 4应用程序中.有没有一种方法可以让它与turbolinks一起正常工作?

如果我在我的JS应用程序资产上添加此代码.由于turbolinks,它无法正常工作:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (function(d, s, id){
     var js, …
Run Code Online (Sandbox Code Playgroud)

facebook ruby-on-rails turbolinks

4
推荐指数
2
解决办法
3512
查看次数

Turbolinks导致与href ="#"的链接触发页面刷新

我的页面上有一个非常简单的链接.<a href="#">My link</a>.它会导致页面刷新.当我删除"turbolinks"时,它不再导致刷新.

我过去一直使用带有哈希片段的链接.除非我长时间遗漏了一些非常基本的东西,否则我不明白这是如何导致刷新的.

它没有附加任何JS事件处理程序.

有任何想法吗?

这可能没关系,但我正在使用jQuery,Twitter-Bootstrap和Ruby on Rails.

到目前为止的线索:

  • 当我删除Turbolinks时,链接表现正常(不会导致页面刷新).
  • 链接"#"作为URL导致我的应用程序的每个页面上的重新加载.
  • 与任何"#hasfragmenttext"的链接将导致单次刷新,然后页面的URL为"mypage#ha​​sfragmenttext",任何额外的点击都不会导致页面刷新...嗯.

ruby-on-rails ujs turbolinks ruby-on-rails-4

4
推荐指数
2
解决办法
2534
查看次数

如何使AddThis与Rails 4 turbo-links一起使用?

我试图在我的Rails网站上设置AddThis插件,但目前只取得了部分成功.问题是它不能像turbo-links一样工作.AddThis共享按钮仅在页面刷新后出现.如果我点击网站的其他部分,AddThis工具栏将消失.如果我禁用turbo-links,那么它将适用于网站的每个部分.

这是我生成智能图层时的代码:

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxx"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }   
  });
</script>
<!-- AddThis Smart Layers END -->
Run Code Online (Sandbox Code Playgroud)

该代码当然不适用于turbo-links.我发现这个解决方案' 如何使用turbilinks rails 4添加这项工作,作者证实它有效,但当我点击网站的其他部分时我仍然有问题.

我试图head在我的application.html.erb文件中的标记内插入此代码:

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript">$(document).ready(function() {

    var script="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxx";

    if (window.addthis){
        window.addthis = null;
        window._adr = null; …
Run Code Online (Sandbox Code Playgroud)

javascript ruby-on-rails addthis turbolinks

4
推荐指数
1
解决办法
1472
查看次数

使用基础和Turbolinks与Rails 4的麻烦

我有一个带有2个按钮的标题:登录和注册就像这样.当我点击其中一个时,会出现一个窗口:窗口打开.为此,我用粉底的"显示模态"(显示模态).

我的问题:如果我点击链接打开我的网站的新页面并尝试打开/关闭登录或注册弹出窗口,窗口关闭,但这次阴影保持(像这样),我需要按F5这又有效了.

我使用Rails 4和基础5.

文件_header.html.erb(查看部分)

<div class="large-12 columns header">
  <div class="logo">
    logo
  </div>
  <div class="infos">
      <ul>
        <li><a href="#" class="" data-reveal-id="login">Login</a></li>
        <li><a href="#" class="" data-reveal-id="signup">Sign up</a></li>
      </ul>
  </div>
</div>

<div id="login" class="reveal-modal" data-reveal>
  <p>
    Page Test 
  </p>
</div>

<div id="signup" class="reveal-modal roundish" data-reveal>
  <p>
    Page Test 
  </p>
</div>
Run Code Online (Sandbox Code Playgroud)

文件application.js

//= require jquery
//= require turbolinks
//= require foundation
//= require bxslider/jquery.bxslider.min.js
//= require home
//= require_tree .

$(function() {
  $(document).foundation();
});
Run Code Online (Sandbox Code Playgroud)

谢谢您的帮助.

javascript jquery ruby-on-rails zurb-foundation turbolinks

4
推荐指数
1
解决办法
1276
查看次数

javascript_include_tag会抛出不受支持的方法

我最近使用Rails 4.2.0创建了一个新项目,并创建了一个名为Land登录页面的控制器.所以,我在visting时遇到了这个错误http://localhost:3000/land/home:

Started GET "/" for ::1 at 2015-02-27 15:56:23 -0600
Processing by LandController#home as HTML
Rendered land/home.html.erb within layouts/application (0.0ms)
Completed 500 Internal Server Error in 5526ms

ActionView::Template::Error (TypeError: Object doesn't support this property or method
(in C:/Ruby21-x64/lib/ruby/gems/2.1.0/gems/turbolinks-2.5.3/lib/assets/javascripts/turbolinks.js.coffee)):
3: <head>
4:   <title>Course</title>
5:   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
6:   <%= javascript_include_tag 'application' %>
7:   <%= csrf_meta_tags %>
8: </head>
9: <body>
app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb__1279127835_98590860'


Rendered C:/Ruby21-x64/lib/ruby/gems/2.1.0/gems/web-console-2.0.0/lib/action_dispatch/templates/rescues/_source.erb (5.0ms)

Rendered C:/Ruby21-x64/lib/ruby/gems/2.1.0/gems/web-console-2.0.0/lib/action_dispatch/templates/rescues/_trace.html.erb (10.0ms)

Rendered C:/Ruby21-x64/lib/ruby/gems/2.1.0/gems/web-console-2.0.0/lib/action_dispatch/templates/rescues/_request_and_response.html.erb …
Run Code Online (Sandbox Code Playgroud)

ruby-on-rails turbolinks ruby-on-rails-4

4
推荐指数
1
解决办法
5819
查看次数

Ruby On Rails:jQuery datepicker仅在刷新页面时有效

我遇到的问题是,当我浏览表单页面并单击文本字段上的date_sent时,jQuery应该弹出一个datepicker.但是,我一开始什么都没得到,但是当我刷新页面时它就可以了.

我几乎可以肯定我的问题是使用turbolinks,因为我认为我的JavaScript因为turbolinks而没有加载.但是,我不想删除turbolinks,因为没有它我的页面渲染速度很慢.我怎样才能做到这一点?

的application.js

//= require jquery
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require bootstrap-sprockets
//= require cocoon
//= require turbolinks
//= require_tree .
Run Code Online (Sandbox Code Playgroud)

application.scss

 *= require_self
 *= require jquery-ui/datepicker
 *= require_tree .
 */

@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'sites';
Run Code Online (Sandbox Code Playgroud)

form.coffee

jQuery ->
    $('#send_date').datepicker()
Run Code Online (Sandbox Code Playgroud)

form.html.erb

<div class="form-group" >
      <%= f.label :date_sent, class: 'control-label' %><br>
      <%= f.text_field :date_sent, id: 'send_date' %>
</div>
Run Code Online (Sandbox Code Playgroud)

jquery rubygems ruby-on-rails coffeescript turbolinks

4
推荐指数
1
解决办法
620
查看次数

要将Turbolinks 5与Django一起使用,在使用redirect()时如何自动包含Turbolinks-Location标头?

根据Turbolinks 5文档中的“跟随重定向”(https://github.com/turbolinks/turbolinks#following-redirects):

当您访问location /one并且服务器将您重定向到location时 /two,您希望浏览器的地址栏显示重定向的URL。

但是,Turbolinks使用发出请求XMLHttpRequest,该请求透明地跟随重定向。Turbolinks无法在没有服务器额外配合的情况下判断请求是否导致了重定向。

解决方案是:

发送Turbolinks-Location标头以响应被重定向的访问,Turbolinks将用您提供的值替换浏览器的最高历史记录条目。

Turbolinks Rails引擎针对通过redirect_to助手重定向的非GET XHR请求自动执行此优化。

我对在Django(1.11)项目上使用Turbolinks感兴趣,我想知道是否有人可以向我指出如何创建新的Django redirect()函数或修改现有函数以始终包含Turbolinks的正确方向-重定向到预期功能所需的位置标头。我绝对不希望每次重定向时都手动设置此标头。

在“提交表单后重定向”部分中有一个类似的条目(https://github.com/turbolinks/turbolinks#redirecting-after-a-form-submission),对于理解如何实现的任何帮助,我也将不胜感激:

如果表单提交导致服务器上的状态更改影响缓存的页面,请考虑使用清除Turbolinks的缓存 Turbolinks.clearCache()

Turbolinks Rails引擎针对通过redirect_to助手重定向的非GET XHR请求自动执行此优化。

我确实在github上看到一个“为Django引入Turbolinks实现”程序包,但这是从turbolinks-classic派生的,并且源代码没有提及Turbolinks-Location标头,因此我确定这不是我想要的。

python django redirect http-headers turbolinks

4
推荐指数
1
解决办法
1259
查看次数