【问题标题】:Purpose of remote: true in rails远程的目的:在 Rails 中为真
【发布时间】:2015-10-09 06:29:40
【问题描述】:

我按照 Rails 教程提交了一个带有 ajax 的表单。我们在form_for 中使用了remote: true

<%= form_for @task, remote: true do |f|   %>

一切正常。但我对remote: true 感到困惑。 remote: true的目的是什么?

【问题讨论】:

    标签: ruby-on-rails ajax ruby-on-rails-4


    【解决方案1】:

    JS

    remote: trueRails UJS (unobtrusive Javascript) 驱动程序的一部分。它只是将data-remote: true 属性添加到您将其添加到的任何对象中,从而允许 Rails 的 UJS 脚本将其绑定到某些 ajax 功能...

    Some definition from Rails:

    注意data-remote="true"。现在,表单将由 Ajax 提交 而不是通过浏览器的正常提交机制。

    您可能不想只是坐在那里填满 , 尽管。您可能想在成功后做某事 提交。为此,请绑定到 ajax:success 事件。失败时, 使用 ajax:错误。看看吧:

    It's pretty simple really....

    它基本上为页面上具有data-remote: true 的任何元素分配了一个Javascript .on 绑定。这就是为您发送 Ajax 请求的内容。


    挂钩

    需要注意的重要一点是,此方法会创建 several "hooks",您可以将其与其他 javascript 一起使用:

    这允许您使用remote: true 功能,并通过使用上面的钩子自定义发生的事情...

    #app/views/messages/new.html.erb
    <%= form_for @messages, remote: true do |f| %>
       <%= f.submit %>
    <% end %>
    
    #app/assets/javascripts/application.js
    $(document).on("ajax:success", "#messages", function(event, data, status, xhr) {
        alert("Form submitted, thank you!");
    });
    

    【讨论】:

      【解决方案2】:

      remote: truedata-remote="true" 生成为html

      它通过ajax提交form而不是浏览器的正常提交机制

      Reference

      【讨论】:

        【解决方案3】:

        :remote =&gt; true 标志用于您要触发 AJAX 调用的元素的视图文件中的链接或表单标记,例如

        <%= form_for @task, remote: true do |f| %>
        

        使用:remote =&gt; true,Rails 不会自动切换视图,而是允许运行 JQuery。

        在表单中使用:remote =&gt; true的主要目的是,表单是通过Ajax提交的,而不是浏览器正常的提交机制。

        我强烈建议您阅读Official Rails Documentation for Working with JavaScript in Rails。 在那里你会发现一些使用:remote =&gt; true 和表单、链接等的例子,这将帮助你理解:remote=true 在Rails 中的用途:-)

        【讨论】:

        • 通俗易懂
        【解决方案4】:

        remote: true 允许在不刷新页面的情况下提交表单或简单地生成请求

        您也可以将 remote: true 与链接一起使用 远程表单提交的最佳示例是当您在 stackoverflow 上投票/否决答案时

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2018-12-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2023-03-17
          • 1970-01-01
          • 2013-03-01
          • 2014-10-22
          相关资源
          最近更新 更多