Rails 3 就地编辑

Question

我正在尝试在 Rails 3 应用程序中实现就地编辑，该应用程序获取编辑后的值并根据该值修改计算。例如：

编辑“捐赠积分”字段之前：
您还剩 10 个学分。捐赠积分：0。

编辑“捐赠积分”字段后：
您还剩 5 个学分。捐赠积分：5。

我研究了各种选项，看起来 jquery-in-place-editor 可以满足我的要求。供参考：

• jQuery-in-place-editor 代码
• 示例 Rails 应用
• 示例 Rails 应用程序的 Github 存储库

该演示有效。但我认为我需要做的是使用回调函数来调用ruby脚本，这样我就可以做更多的处理。我不完全确定这是否是我需要做的，所以我正在寻找一些指导。

这是 jQuery javascript (来自 /public/javascripts/application.js 在示例应用程序中），我认为是相关的：

// Using a callback function to update 2 divs
$("#editme4").editInPlace({
    callback: function(original_element, html, original){
        $("#updateDiv1").html("The original html was: " + original);
        $("#updateDiv2").html("The updated text is: " + html);
        return(html);
    }
});

看起来我需要做的是采用 original 和 html 并尝试一下它们，然后将它们反馈给适当的div。问题是，我该怎么做？我正在考虑两种可能性：

A. jquery-in-place-editor 中有一个工具可以调用 url。我可以用它来调用 ruby​​ 脚本并获得结果吗？我该如何在 Rails 中做到这一点？下面是调用 url 的代码（同样来自 /public/javascripts/application.js）；但它调用了一个php脚本。

$("#editme1").editInPlace({
    // callback: function(unused, enteredText) { return enteredText; },
    url: 'server.php',
    show_buttons: true
});

B.直接在javascript中修改更新的文本，并将其传递给适当的div。我更喜欢使用 ruby​​ 脚本，但这也许会更容易。

Answer 1

这个问题的解决方案相当复杂，但我找到了一种方法。令我惊讶的是，该解决方案并不容易获得，因为正如 r-dub 所说，它确实看起来很常见。我最终没有使用 jQuery 插件的任何就地编辑功能，而是在表单文本字段的基础上借助 jQuery 直接修改文本字段。换句话说，我遵循了上面的（B）。

我有一个看起来像这样的视图：

Available: <span id="available_cr"><%= @available_credits %></span>
Remaining: <span id="remaining_cr"><%= @remaining_credits %></span>

<%= form_for(@page, :html => { :id => 'do_fvalue' }, :remote => true) do |f| %>
  <div class="field">
    How many to buy at <%= @cost %> credits per unit? <%= f.text_field :fvalue, :autocomplete => :off %>
  </div>
  <div class="field">
    How many to buy at <%= @cost_20 %> credits per unit? <%= f.text_field :gvalue, :autocomplete => :off %>
  </div>
  <div class="actions">
    <%= f.submit "Update" %>
  </div>
<% end %>

然后我将 Rails @-variables 填充到 .html.erb 部分（在我的页面 .html.erb 的开头呈现），以便 javascript/jQuery 可以访问它们：

<script type="text/javascript">
  var cost = parseInt(<%= @cost %>)
  var cost_20 = parseInt(<%= @cost_20 %>)
  var available_credits = parseInt(<%= @available_credits %>)
  var remaining_credits = parseInt(<%= @remaining_credits %>)
</script>

然后，在公共场合/javascripts/applications.js，我有以下代码：

function checkFields(){
  var to_buy_f = $("#page_fvalue").val();
  var to_buy_g = $("#page_gvalue").val();
  var subtract_f = to_buy_f * cost;
  var subtract_g = to_buy_g * cost_20;
  var remain = available_credits - subtract_f - subtract_g;
  $("#remaining_cr").text(remain);
};

$("#page_fvalue").keyup(function () {
   checkFields();
}).keyup();

$("#page_gvalue").keyup(function () {
   checkFields();
}).keyup();

checkFields 函数根据 #page_fvalue 和 #page_gvalue 中找到的值更新 #remaining_cr。请注意，它使用了 available_credits、cost 和 cost_20，我们将其填充到上面的 javascript 变量中。最后两个函数告诉 jQuery 监视 #page_fvalue 和 #page_gvalue 的 keyup 事件。当用户按下某个键时，它会调用 checkFields() 来更新#remaining_cr。

除此之外，当用户单击表单上的“提交”时，整个表单都会以当前值提交。我不知道这是否是做我想做的事情最有效的方法，但它有效！

Answer 2

你想做的事情很常见。您想要做的是在该回调中发出 AJAX 请求，将原始数据发送到您的 Rails 应用程序并将修改后的 html 返回到您的页面。这是 jQuery AJAX 手册页。向下滚动查看一些示例。