javascript - ruby 轨道 : Create Database Entry without JavaScript

Question

我是网络开发的新手，尝试使用 Ruby on Rails (3.2.9) 开始一个项目。所以，我对 RoR 在没有 JavaScript 的情况下能做什么感到有点困惑……例如使用 Rails 脚手架，通过访问 Controller 的新方法(然后调用创建方法并将记录保存到数据库)在数据库中创建新记录没有问题我现在想在不使用 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 代码的简化版本:

再培训局:

# 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 %>

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