9

我主要是一个后端开发人员,对 javascript 相关的东西(以及这个地方存在的所有框架)不太熟练。我知道这很糟糕,但事实就是如此。

我对我遇到的问题变得疯狂,我可能错过了一些非常基本的东西。我做了一些研究(谷歌+堆栈溢出圣经),没有发现任何与我遇到的问题相似的案例。我想我只是不知道我在做什么。让我解释。

发生了什么

我将 Rails 4 用于一个小型(无用)项目,并尝试在咖啡脚本文件中编写一些 javascript“代码”。

显然,我编写的咖啡脚本“代码”仅在我重新加载页面或POST请求之后(例如,当您提交表单时)有效。例如,在GET请求时,在从一个页面导航到另一个页面期间,什么都没有发生。

我尝试了一个非常简单的基本 101 测试:在页面上显示一条警报消息(你好!)(它首先包含一个日期选择器)。

假设我有一个Article模型和一个关联ArticlesController的编辑/创建/删除数据。我有以下文件:

app/assets/javascripts/application.js
app/assets/javascripts/articles.js.coffeee
app/controllers/articles_controller.rb 
app/models/article.rb
app/views/articles/new.html.erb 
app/views/articles/index.html.erb 
etc.

我只是在中添加一行app/assets/javascripts/articles.js.coffee

alert "Hello!"

如果我提交表单或重新加载页面,我会看到警报“Hello!”。如果我只是单击一个链接,例如编辑一篇文章,什么都不会发生。

日志

当我查看这两种情况下的 rails 日志时,我有两种不同的情况

在“它不工作”的情况下,当我做一个简单的get请求(通过点击编辑链接)时,我在日志中有这个:

Started GET "/articles/1/edit" for 127.0.0.1 at 2013-09-17 14:35:28 -0400
Processing by ArticlesController#edit as HTML
  Parameters: {"id"=>"1"}
  Author Load (0.3ms)  SELECT "authors".* FROM "authors" WHERE "authors"."remember_token" = 'ab6fa1c5257585de99459c60f24121c' LIMIT 1
  Article Load (0.2ms)  SELECT "articles".* FROM "articles" WHERE "articles"."author_id" = ? AND "articles"."id" = 1 ORDER BY published_at DESC LIMIT 1  [["author_id", 1]]
  Rendered shared/_error_messages.html.erb (0.1ms)
  Rendered articles/edit.html.erb within layouts/application (6.6ms)
  Rendered layouts/_shim.html.erb (0.1ms)
  Rendered layouts/_header.html.erb (0.6ms)
  Rendered layouts/_footer.html.erb (0.1ms)
Completed 200 OK in 44ms (Views: 40.4ms | ActiveRecord: 0.4ms)

在“它确实有效”的情况下,例如,当我重新加载相同的编辑页面时,它会重新加载所有内容..

Started GET "/articles/1/edit" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Processing by ArticlesController#edit as HTML
  Parameters: {"id"=>"1"}
  Author Load (0.3ms)  SELECT "authors".* FROM "authors" WHERE "authors"."remember_token" = 'ab6fa1c5257585de99459c60f24121c' LIMIT 1
  Article Load (0.1ms)  SELECT "articles".* FROM "articles" WHERE "articles"."author_id" = ? AND "articles"."id" = 1 ORDER BY published_at DESC LIMIT 1  [["author_id", 1]]
  Rendered shared/_error_messages.html.erb (0.1ms)
  Rendered articles/edit.html.erb within layouts/application (5.0ms)
  Rendered layouts/_shim.html.erb (0.1ms)
  Rendered layouts/_header.html.erb (0.4ms)
  Rendered layouts/_footer.html.erb (0.1ms)
Completed 200 OK in 26ms (Views: 23.4ms | ActiveRecord: 0.4ms)


Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/articles.css?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/articles.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
(i removed some of the lines to make it clearer)

我试过的

我试图用

rake assets:precompile

但它是一样的。

我尝试安装一些 gem,例如 therubyracer、barista,它是一样的。

我错过了一些非常基本的东西吗?我应该读一本关于 javascript 基础的书吗?我应该因为不理解一些很容易的事情而被驱逐到阿拉斯加吗?我应该退休还是换工作?

谢谢您的帮助。我陷入了抑郁。

4

2 回答 2

12

这是因为 turbolinks 宝石。当您单击一个链接时,浏览器并没有真正重新加载页面,它只是执行 AJAX 请求并更改标题和正文,而其他一切都保持原样。如果你想绕过它,你可以turbolinks从你的application.js文件中删除或安装jquery-turbolinks gem//= require jquery.turbolinks在你需要 jquery 或 jquery ui 之后立即放置。

而且我还建议在您的咖啡纸中使用$ ->$(document).ready ->(在大多数情况下几乎相同)。

于 2013-09-18T17:25:00.883 回答
2

这是一个问题,因为turbolinks:您的 javascript 文件只评估一次(在页面加载时)。

要在页面更改时强制重新评估您的代码,请在事件上添加一个事件侦听器page:load

ready = ->
  alert 'hello'

$(document).ready(ready)
$(document).on('page:load', ready)
于 2013-09-18T17:24:55.667 回答