标签: turbolinks

我正在显示页面上执行内联编辑功能，并使用涡轮加载的框架上方的“编辑”按钮。尝试在编辑按钮上添加一个开关，使其在编辑模式下切换到取消按钮。

我认为一个简单的刺激控制器就可以解决这个问题，除非您添加了data-action="click->edit-button#toggle"覆盖按钮上的涡轮动作的控制器。想法？有想法吗？

<div turbo-controller="edit-button">
  <a class="btn btn-sm btn-primary btn-outline" data-turbo-frame="project" data-edit-button-target="button" data-value="show" href="/foobar/234/edit">Edit</a>
  <turbo-frame id="project">
    content
  </turbo-frame>
</div>

我使用一些代码在Rails 3上运行得很好但在Rails 4上运行不好,我猜它是由Turbolinks引起的,但我不太了解它,不能深入挖掘解决我的问题,这里是代码:

视图:

a/v/m/_new_comment.slim                                                                                                                             
.new-comment                                                                                                                                         
- if current_user
  = render "editor_toolbar"
  = form_for(Comment.new, :remote => true, :url => mission_comments_path(@mission)) do |f|
  = f.text_area :content, :class => "span10",
    :rows => "4", :tabindex => "1"
  #preview.hidden
    = "Loading..." 
  = f.submit t("missions.submit_comment"),
    "data-disable-with" => t("missions.submitting"),
    :class => "btn btn-primary", :tabindex => "2"
- else
  = render "need_login_to_comment"

控制器:

def create
  @mission = Mission.find(params[:mission_id])
  @comment = @mission.comments.build(comment_params)
  @comment.user = current_user

  if @comment.save
  @mission.events.create(user: current_user, action: "comment")
  render layout: false
end

和js:

<% if …

我正在使用带有Turbolink的bootstrap 3，问题是，当我在编辑表单中按Submit按钮时，什么也没发生，但是如果我重新加载页面，则每个输入都可以提交。我不明白为什么会这样，我什至没有在表单中使用javascript。这是代码：

<div class = "row">
  <%= semantic_form_for @post do |f| %>
  <%= f.semantic_errors %>
  <div class = "form-group">
    <div class = "col-lg-9 col-md-7">   
      <%= f.input :title, :label => "Title" %>
      <%= f.input :content, :as => :rich, :allow_embeds => true %>
      <%= f.input :cat_list, :label => "Type your tags here" %>
    </div>
  <div class = "col-lg-3 col-md-4 ">
      <p>
      <%= image_tag(@post.thumbnail.url(:original), :class => "img-thumbnail") %>
      </p>
      <p>
      <%= f.input :thumbnail, as: :file %>
      </p>
      <p>
      <%= f.select :tag_list, Post::Tags, { …

我发现当我使用Prism.js语法highliting与Turbolinks组合突出显示行为奇怪.

当我加载第一次突出显示语法的页面时,Prism.js不会被触发,也没有突出显示任何内容.重新加载同一页后,Prism将启动并高亮显示代码.除非我更改位置(转到root)并返回到它(在相同的场景之后),否则页面将在此之后保持突出显示

当我从清单文件中删除Turbolinks时(application.js)一切正常(当然Turbolinks没有做任何事情)

我不想用

= link_to "Foo", blogs_path(blog), "data-no-turbolink" => true 

因为我必须在每一个链接上使用它(每个博客都会有一些代码高亮),因此根本没有任何关于turbolinks的观点

我试图使用Turbolings事件,page:change但我对纯JavaScript很糟糕(Prism.js是纯JS和我是jQuery junky)

所以任何人都知道如何告诉Turbolinks触发Prism.js语法高位？

有人可以解释我们如何将Googletagmanager与Turbolinks正确集成吗？

在正常页面上，我们只是在开始标记后立即复制/粘贴此代码。

  <!-- Google Tag Manager -->
  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-******"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); //f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-******');</script>
  <!-- End Google Tag Manager -->

如果我在Turbolinks支持的页面中复制此代码，则可以看到只有一个网络请求（首次加载页面时）

我已经给出了从索引操作下载csv文件的链接。单击链接后，我需要显示微调器图像，因为下载csv文件需要很长时间。

我可以通过单击如下所示的click jquery函数来显示加载微调器。$（“＃csv_link”）。on（'click'，'show_spinner'）;

现在我的问题在csv文件下载完成之后，如何删除此加载微调器？

因为在控制器操作中，我正在使用send_data方法来下载csv文件。

因此，我无法调用render：js =>“ hider_spinner”之类的任何东西。

由于它抛出双渲染错误。

有人可以建议我解决办法吗？

谢谢

我正在使用包含引导下拉列表的持久导航栏的Rails应用程序.无论出于何种原因,它偶尔会起作用; 在启动或刷新下拉列表将始终有效,在第一次重定向后,它们永远不会工作,之后它似乎基本上在工作和不工作之间交替.当它不起作用时,单击下拉列表时没有任何反应.我最初的怀疑是Turbolinks应该受到责备,但我没有 ,我已经能够验证这一点(见下面的编辑).花了几个小时阅读后,我已经尝试了所有可以找到的"明显"修复,但还没有运气.

值得注意的是,问题仍然存在......

• 有或没有turbolinks.jquery
• 使用bootstrap或bootstrap-sprockets
• 跨越所有最新版本的bootstrap-sass gem
• 是否重新安排我的application.js文件
• 将application.js data-turbolinks-track设置为true或false
• 是否在开发或生产

编辑:

通过完全禁用Turbolinks(删除turboling和jquery-turbolinks gems,删除application.js中对它们的引用,并删除application.html.erb中的data-turbolinks-track属性),我没有工作下拉列表.也就是说,我仍然想知道为什么这不起作用,因为我希望在发布之前重新启用turbolinks./结束编辑

这些是我认为相关的文件:

的application.js

请注意// =需要树.不在场.这是故意的(我有一些特定于页面的javascripts,我将它们包含在application.html.erb中).

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets

Gemfile.rb

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0'

# Bootstrap
gem 'bootstrap-sass', '3.3.4.1'
gem 'autoprefixer-rails'

# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'

# …

如何在Rails 4.2中使用这个新的Turbolinks 3.0(分支:'master')？

我正在尝试,我从Chrome获得此错误:

未捕获的SyntaxError:意外的令牌:

如果我使用这样的部分替换:

<%= link_to "Something", root_path %>

然后在同一页面中:

<script> Turbolinks.visit(url, { change: 'areaDiv' }); </script>

根据文档:https://github.com/rails/turbolinks#partial-replacements-with-turbolinks-30

该页面完全重新加载,我收到了该错误.怎么做？

编辑后的一天

我有Rails 4.2.1标准.

在Gemfile中我添加了:

gem 'turbolinks', :github => 'rails/turbolinks', :branch => 'master'

现在我在一个控制器中:

def ok_category
      render plain: "Ok", change: 'categoriesdiv'
  end

或者这个:

 def red_category
      redirect_to "http://www.google.com", change: 'categoriesdiv'
  end

或者像这样:

def red_category
      render partial: 'category_choose', change: 'categoriesdiv'
  end

如果我, turbolinks: true在每一行的末尾添加,也没有!

我的chrome窗口的标题正在以简洁的"未定义"进行更改,但如果我使用Chrome开发人员工具,它会在"网络"标签中向我说,对服务器的请求已完成"GET"方法,"304"状态,"文本/ Javascript"类型,所有没有错误.

在application.html.erb中我有:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta …

我遵循RoR入门指南，并在进行过程中添加了一些内容。具体来说，我要实现的是在步骤5.13删除文章中，我使用AJAX而不是标准模式来删除文章。

我想以最适合RoR的做事方式来做。在阅读了在Rails中使用JavaScript一章之后，似乎可以采取以下步骤：

1. remote: true向link_to助手添加属性（请参见代码段A）
2. link_to通过添加禁用涡轮增压器此帮助程序data: {turbolinks: false}（请参见代码段A）
3. 向控制器添加一些逻辑，以确保返回JSON（请参见代码段B）。
4. 添加用于侦听ajax:success事件的JavaScript，然后将项目动画化（请参见代码段C）。

片段A

<td><%= link_to 'Destroy', 
        article_path(article),
        method: :delete,
        data: {turbolinks: false, remote: true},
        :class=> 'remove-article' %></td>

片段B

def destroy  
    @article = Article.find(params[:id])

    respond_to do |format|
      if @article.destroy
        format.html { redirect_to articles_path }
        format.json { render json: @article }
      else
        format.html { render action: "index" }
        format.json { render json: @article.errors, status: :unprocessable_entity }
      end
    end

end

片段C

(function(){
  $(document).on('turbolinks:load', listenForArticleDelete); …

对于我的应用程序,我正在尝试设置Turbolinks Mobile包装器>.我遇到了一个无法登录App的问题(我认为问题在于我需要修改Devise才能让它切换到XHR以便为移动设备工作).我的sign_in表单使用Devise但我看不到代码.

Using: ruby "2.4.0" gem "rails", "5.0.2" gem "turbolinks", "~> 5.0.0.beta" gem "devise", ">= 4.2.0" gem "devise-async", git: "https://github.com/mhfs/devise-async", branch: "devise-4.x" # for user authentication

我的问题是我在哪里查看或者我需要做些什么才能修改DEVISE以使其能够为turbolinks移动包装发送XHR？

现在,它不会登录,我知道(或者我在想)我需要让DEVISE切换到XHR,但我不知道如何.

关于如何做到这一点的建议？或参考资料的建议？