标签: turbolinks

我有一个嵌套表单，其中嵌套表单项以主表单中的选择为条件。我将表格的嵌套部分放在涡轮框架中。我有手动链接来更新框架，如下所示：

<a data-turbo-frame="items" href="http://localhost:3000/parent_model/new?nested_id=2">Second Nested Item</a>\n

我想要现有的选择而不是链接，我必须在更改时动态重新加载该框架。

我发现了这个：https ://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441它给出了如下解决方案：

let frame = querySelector(\xe2\x80\x98turbo-frame#your-frame\xe2\x80\x99)\nframe.src = \xe2\x80\x98/my/new/path\xe2\x80\x99\nframe.reload()\n

我仍在寻找一种直接优雅的单线，例如onChange...VS 看起来像完整的刺激控制器等。

我正在开发一个使用Turbolinks gem的Ruby on Rails 4应用程序.我注意到当点击一个链接时,布局仍然呈现在服务器端,但Turbolinks JavaScript只是抓住了这个渲染内容的主体.我的问题是在控制器方面是否可以确定是否通过Turbolinks发出请求.基本上,如果通过Turbolinks发出请求,我想将布局设置为false,以便不执行不需要的代码.在我的ApplicationController中,我已经有了以下代码:

# Don't use layout when AJAX request
layout proc { |controller| controller.request.xhr? ? false: "application" }

如果我通过jQuery发出AJAX请求,此代码会阻止AJAX请求呈现标头,但是当涉及到Turbolinks时,它似乎没有做任何事情.

有时需要在页面访问之间保持滚动位置.

Turbolinks在加载数据后重置滚动位置.

如何禁用特定元素？

像这样的Javascript代码

document.addEventListener("turbolinks:load", function() {
  $("p#hide_if_js").hide();
});

当我在页面之间单击或使用浏览器后退按钮时，turbolinks可以正常工作。但是，当我刷新页面时，未加载javascript代码。如果我刷新几次，则什么也没有发生，但是，如果我单击指向其他背面的链接并单击返回页面，则将加载javascript代码。

看起来turbolinks：load在大多数事件上都起作用，但是页面重新加载却没有。该文档说，它“在初始页面加载时触发一次，并在每次访问Turbolinks之后触发”。怎么了？

我正在使用jquery.turbolinks gem和关联的兼容性代码。

我正在尝试正确配置 Turbo 链接。有没有办法（通过跟踪、javascript 控制台、检查 html 或任何东西）来查看 turbo 链接正在工作的证据？简单地寻找“更快”或“不闪烁”太主观了。

我有一个非常简单的 Rails 应用程序，它有一个 React 组件，它只在特定页面（假设显示页面）的现有div 元素中显示“Hello” 。

当我使用其 URL 加载相关页面时，它可以工作。我在页面上看到你好。

但是，当我之前在另一个页面上时（假设是索引页面，然后我使用 Turbolinks转到显示页面，好吧，除非我再次来回切换，否则不会呈现该组件。（回到索引页面）并返回显示页面）

从这里每次来回，我可以说视图渲染了两次。
不仅两次，而且两次！（即 2 次，然后是 4 次，然后是 6 次等等。）

我知道，因为同时我设置了div我向控制台输出一条消息的内容。

事实上，我想回到索引页应该仍然运行没有显示的组件代码，因为div 元素不在索引页上。但为什么以累积的方式呢？

我想解决的问题是：

1. 在显示页面的第一个请求上运行代码
2. 阻止代码在其他页面（包括索引页面）中运行
3. 在显示页面的后续请求上运行一次代码

这是我使用的确切步骤和代码（我会尽量简洁。）

• 我有一个安装了 react 的 Rails 5.1 应用程序：

  rails new myapp --webpack=react
  

  Run Code Online (Sandbox Code Playgroud)

• 然后我创建了一个简单的Item脚手架来获取一些页面：

  rails generate scaffold Item name
  

  Run Code Online (Sandbox Code Playgroud)

• 我只是在显示页面 …

在使用Turbolinks的Rails 5.1应用程序中,我data-disable-with在我的提交按钮中添加了一个属性,因此在单击时,该按钮将被禁用,以防止意外多次提交数据.这在许多情况下都很有用.

问题是,在使用内置的UJS帮助程序(data-remote=true)通过AJAX提交的表单上,单击提交按钮时,它不会保持禁用状态.它最初被禁用,但在下一页加载之前会快速重新启用.这违背了data-disable-with行为的要点,因为它使意外的表格重新提交.

有没有办法在加载新页面之前保持表单按钮被禁用？

这是表格:

<%= simple_form_for(
  resource,
  as: resource_name,
  url: session_path(resource_name),
  html: { class: "large", autocomplete: "on" },
  remote: true
) do |f| %>
  <%= f.input(
    :email,
    placeholder: "Email address",
    label: false,
    autofocus: true
  ) %>
  <%= f.input(:password, placeholder: "Password", label: false) %>
  <%= f.button(
    :submit,
    "Sign in",
    class: "ui fluid large teal submit button",
    "data-disable-with": "Signing in..."
  ) %>
<% end %>

这是发生了什么.

我想在我的 Rails 4 + Turbolinks 应用程序中集成 hubspot 聊天界面。我已将 Google 标签管理器配置为在每个工作正常的页面加载事件中显示支持聊天界面。

GTM 标记（自定义 html）

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/xxxxxx.js"></script>
<!-- End of HubSpot Embed Code -->

问题

• 当我手动刷新页面（整页刷新）时，hubspot 客户端界面（聊天气泡窗口）出现。
• 当我使用 Turbolinks 访问页面时，它没有显示。

为了调试，我遵循了

我如何知道如果我的中心跟踪代码正在工作

通过检查元素或将其签入浏览器的视图页面源，我可以看到此标记已添加到文档正文 (DOM) 中。网络选项卡还显示对 的网络调用js.hs-script.com。

预期的

• 使用 turbolinks 页面访问的 hubspot 聊天界面：

我有包含在涡轮框架中的内容和搜索表单。当用户在搜索字段中输入内容时，内容会实时更新。问题是搜索字段每次都会失去焦点。

有什么方法可以保持注意力集中吗？它也应该只在打字时进行，而不是与其他表单输入交互。

我可以将搜索字段移到 Turbo 框架之外，但考虑到我喜欢的 div 布局，这并不是那么理想。

嘿，我是 Turbo_streams 的新手，我一直不明白为什么会收到此错误。

属性部分：

<div id="properties"
     data-action="map-marker-clicked@window->@mapmarker#mapMarkerClicked"
     data-controller="mapmarker"
     data-mapmarker-target="properties_list">
  <%= "#{@properties.length} properties" %>

  <%= turbo_stream_from "properties" %>
  <%= turbo_frame_tag "properties" do %>
    <% @properties.each do |property| %>
      <%= render property %>
      <p>
        <%= link_to "View this property", property %>
      </p>
    <% end %>
  <% end %>
</div>

还有我的控制器：

  def index
    @properties = location_search? ? Property::SearchByLocation.call(search_params[:value]) : Property.all

    @markers = Property::GenerateGoogleApiMapMarkers.call(property_or_properties: @properties)

    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: turbo_stream.replace(@properties, partial: 'properties/properties')
      end
    end
  end

更多上下文：我计划从刺激控制器触发此重新加载（当用户单击谷歌地图上的标记时，我想使用标记的坐标刷新属性部分作为组织属性的方式（最接近标记将显示在顶部）。

当我访问 http://localhost:3000/properties 时，出现 ActionController::UnknownFormat 错误