javascript - Ruby on Rails : Create Database Entry without JavaScript

Question

我是 Web 开发领域的新手，正在尝试使用 Ruby on Rails (3.2.9) 开始一个项目。 所以，我有点困惑 RoR 在没有 JavaScript 的情况下能做什么...... 例如，使用 Rails Scaffold 时，通过访问 Controller 的新方法(然后调用 create 方法并将记录保存到数据库)在数据库中创建新记录是没有问题的 我现在想创建新记录而不使用 View 。 就像“用户点击按钮 -> 记录已保存” 我会给你一个例子(我需要这个来进行学习，这不是一个现实生活中的项目......)

我有一个 View ，显示了我的所有文章(rails 生成脚手架文章)，现在添加了一个指向“购买方法”的链接，其中显示了文章名称和可用数量。 下面有一个字段，客户可以在其中选择他想要购买的商品的数量。

<p>
  <b>Name:</b>
  <%= @article.name %>
</p>

<p>
  <b>Available:</b>
  <%= @article.stocks %>
</p>

<%= form_for(@article) do |f| %>

 <div class="field">
    <b>How many?</b>
    <br />
    <%= f.number_field :amount %>
  </div>
<% end %> 

现在我想添加一个链接(或者我认为更好的按钮)，该链接会引发一个事件，将文章的名称和选定的金额转换为类似于订单项目的内容，即在 order_item 表中创建一条记录。

<td><%=link_to "Ja", :controller => "oderItem", :method => "create" %></td><br>

现在我很困惑我该如何做到这一点。 我考虑过只使用 Controller 的 create - 方法(或任何方法)，它可以执行以下操作:

def match

    @apo = OrderItem.new(:amount :2, ...)
    @apo.save
end

但这似乎只是让我了解 Controller 的新方法或类似的东西。

所以，有了这个解释(也许也揭示了我的知识水平......)任何人都可以告诉我我是否在 Rails 上做错了什么，或者我是否只需要使用 javascript 来实现这个？？？

一些示例代码(针对 Rails 和/或 JS)将不胜感激! (请保持简单，我知道 Ajax 等是最先进的，但我只想让它运行:-)) ...还链接到代码示例，它仅在 Rails 上显示此类项目(简单:-))会非常好!

Answer 1

为了更改页面布局以显示“迷你”表单以响应用户单击特定元素，您需要呈现新 View ，或通过 JavaScript 修改当前文档。

如果您选择通过 JavaScript 显示表单，则此 View 代码可能如下所示的简化版本:

ERB:

# rendering each available article...
<% @articles.each do |article| %>

  <p>
    <b>Name:</b>
    <%= article.name %>
  </p>

  <p>
    <b>Available:</b>
    <%= article.stocks %>
  </p>

  <% button_tag(:type => 'button', :class => 'buy-btn', data-article-id="article.id") do %>
    <strong>Buy Me!</strong>
  <% end %>

  # for each article, create a mini form with which
  # the user can buy n of said article...
  <div class="field hidden-item" id="form-#{article.id}" >
    <%= form_for(OrderItem.new do |f| %>   
      <b>How many?</b>
      <br />
      <%= f.number_field_tag :amount%>
      <%= f.submit %>    
    <% end %> 
  </div>
<% end %>

CSS:

.field {
  display: none; //hides the div from all browsers by default
}

JavaScript 帮助将所有内容结合在一起:

$(document).ready(function() {
  //... other js code

  // bind all elements with the css class 'buy-btn' to 
  // a click event...
  $(".buy-btn").bind('click', function() {
      var id = $(this).data('article-id');
      $("#form-" + id).slideDown(); // shows the selected element with a nice slide down effect
  });

  //... other js code

});

因此，在 ERB 中，我们为每篇文章提供一个等待填写和提交的迷你表单。该表单默认隐藏在我们的 CSS 中，当用户单击“Buy Me!”时可见。相关文章的按钮。

这种方法还可以进行一些调整，以允许用户通过稍微移动表单声明并在 OrderItemsController.create 操作中进行适当的处​​理来订购他们想要的任意数量的不同文章。

要记住的另一件事是，单击表单上的提交按钮将导致页面默认重定向。这可能就是您刚开始使用时想要保留的方式，但是当您开始熟悉时，请查看如何在提交标记上使用 :remote => true 以允许在后台提交表单通过 AJAX。

如果你真的想在没有任何 JavaScript 的情况下完成它，你要么必须使用 CSS 做一些非常高级的工作，要么必须设置一个链接，将参数传递给你的 View ，指示它显示一种特定的形式。看起来可能是这样的:

# rendering each available article, as before...
<% @articles.each do |article| %>

  <p>
    <b>Name:</b>
    <%= article.name %>
  </p>

  <p>
    <b>Available:</b>
    <%= article.stocks %>
  </p>

  # ... but now set up a link that passes a param to the controller...
  <%= link_to( 'Buy Me!', "/articles?article=#{article.id}" ) %>

  # which we then use to render a form on the page if the id in the
  # 'article' param matches the id of the article we are currently
  # rendering...
  <% if params[:article] && params[:article] == article.id %>

    <%= form_for(OrderItem.new do |f| %>   
      <b>How many?</b>
      <br />
      <%= f.number_field_tag :amount%>
      <%= f.submit %>    
    <% end %> 
  </div>
<% end %>

这可能不准确，但我希望它能为您指明正确的方向!