Unobtrustive JS Ruby on Rails，onclick 用表单元素替换 div 内容

Question

我在 div 标签内有一段简单的文本，如下所示：

<div id="text">Value 
<a href="/actual/link/incase/user/has/JS/turned/off" id="change_value"/>
</div>

然后我有这个 javascript

$('change_value').observe('click', function(event){
  $("text").update("something here!");
  event.stop(); // Prevent link from following through to its given href
});

这一切都很棒。但是我有两个问题（首先是我的主要问题）：

1. 我如何得到它，而不是用“这里的东西”更新div，而是用表单元素（即表单标签、标签、文本框）更新它以及一个“提交”更改的按钮。这个想法是用户将能够在页面上就地编辑此字段。

2. 我应该把我的 JS 放在哪里。我目前将它放在 application.js 中并使用 window.onLoad 运行该函数...这是唯一的方法吗？我认为是这样，否则它会抱怨找不到该元素！

谢谢大家！

Answer 1

我认为你最好的选择是观看 Railscasts #196 和 #197 ：

http ://railscasts.com/episodes/196-nested-model-form-part-1

http://railscasts.com/episodes/197-nested-model-form-part-2

这些强制转换解释了如何以表单（3 级）创建嵌套模型；第 2 部分重点关注用于添加和删除等操作的 javascript 部分。

观赏性好。

Answer 2

问题 1：您可以对您需要的任何控制器/操作进行 AJAX 调用。您的控制器将获取您正在寻找的对象，然后发送 js.erb 模板。 js.erb 模板可以执行如下操作：

$('#change_value').update('<%= render :partial => @object %>');

然后，该对象类型的部分内容将包含您需要的表单。在各种 Railscasts 剧集中，有更多关于此方法的内容。第 136 集有很好的示例，但使用了 jQuery，因此您必须使其适应 Prototype 语法（尽管如果您还没有尝试过 jQuery，我建议您尝试一下）。第 235 集有很多关于 UJS 的好东西，并展示了 jQuery 和 Prototype 的示例。

问题 2：不，它不必放在 application.js 中。您可以创建另一个特定于该资源的 js 文件，并将其包含在该资源的布局中。如果该资源不使用布局，我认为您仍然可以将其包含在您的视图中。