Question

我的网页上显示了一组按钮。单击其中一个按钮的效果需要是调用外部API（可能是接收到的响应，并更新页面上的内容）。

一些附加信息：这些按钮由部分放在页面上，并构成用户列表的一部分。这些按钮用于激活和停用列出的用户。我不确定这种设置是否会影响我做我想做的最佳方法，所以我认为值得一提。

应该怎么做？按钮应该链接到我的rails应用程序中的某个控制器吗？当按钮被击中时，是否需要重新加载页面？我可以将该请求卸载到ajax吗？等等。

我不知道解决这个问题的最佳方法，任何指导都会非常宝贵。

Answer 1

确定。我相信我已经找到了很好的实现。

诀窍是创建一个封装按钮的表单，以便在单击按钮时点击正确的控制器。就我而言，我使用rails form_tag函数在我的Developer控制器的_list_item.html.erb局部视图中生成我的按钮，如下所示：

<div id=<%= list_item.id %>>
    <%= form_tag "/Developer/toggle", :method => "get", :remote => true do %>
    <p>
        <% if list_item.inactive? %>
        <%= submit_tag "Activate", :name => nil %>
        <input type="hidden" name="act" value="activate" />
        <% else %>
        <%= submit_tag "Deactivate", :name => nil %>
        <input type="hidden" name="act" value="deactivate" />
        <% end %>
    </p>
    <input type="hidden" name="dev_id" value=<%=list_item.id%> />
    <% end %>
</div>

在这部分内容中有两件事需要引起注意。

由于这是部分呈现为列表的一部分，因此您希望为每个列表项提供唯一的ID，以便您的javascript仅对该元素起作用。这是在第一行<div id=<%= list_item.id %>>完成的，我知道这将是唯一的，因为列表中的每个开发人员都必须具有唯一的ID。
:remote => true是form_for函数的必要参数，这是导致请求在后台进行而不是加载新页面的原因。

此表单在提交时会使用两个参数点击我的Developer#toggle操作：act，activate或deactivate和id这是我们正在处理的开发者的ID。这两个参数都是表单中的隐藏字段。

在提交表单后，在控制器内部，我只获取了正确开发人员的实例（在我的情况下，这样做相当复杂，但在大多数情况下，它可能类似于@dev = Developer.find(id)），并且执行激活/停用开发人员所需的步骤。

最后，我在我的Developer控制器的视图目录中创建了一个toggle.js.erb文件，一旦控制器完成其任务就会呈现该文件。这个文件只是获取元素（通过我们在partial中给出的唯一id）并通过重新渲染部分替换内部html，如下所示：

document.getElementById("<%=escape_javascript(@dev.id)%>").innerHTML="<%=escape_javascript(render :partial => 'developer/list_item', :object => @dev) %>";

结果是在开发者活动状态发生变化后部分重新呈现，从而生成相应的Activate或Deactivate按钮。

我意识到这个答案高度集中在我的特定应用上，特别是需要处理活动与非活动的切换，但我相信它很容易简化并适应其他可能需要较少复杂性的情况。

Answer 2

您可以使用Rails执行此任务，但必须完成页面刷新。如果您使用Javascript / AJAX，则不应刷新页面。示例（jQuery）：

$(":button").click(function(){ 
  //Your Code here..
});

编辑：上面是jQuery代码。你想要做的是当你点击按钮时发生的一些动作。如果要调用外部API，则可以使用ajax。在jQuery中查找POST和GET的文档：http://api.jquery.com/jQuery.post/和http://api.jquery.com/jQuery.get/。 Google for rails jquery tutorial。

将功能附加到导轨3中的按钮

2 个答案: