关于不引人注目的 javascript 我不明白的一件事

Question

我喜欢分离功能的想法，这似乎是未来的发展方向。

但我习惯于在嵌入式语言（如 Rails ERB 或 PHP）中将 javascript 集成到循环内，在其中我可以使用特定对象的 ID 作为 javascript 中的引用。

Rails 示例：

<% @comments.each do |comment| %>
  <div id="comment_<%= comment.id %>">
    <%= comment.text %>
    <% link_to_function "Reply", "$('comment_#{comment.id}').insert(\"#{escape_javascript(render :partial => "_form", :locals => {:comment => comment})}\", {position: 'bottom'});" %>
  </div>
<% end %>

这也不是我唯一一次想在 javascript 中使用 Ruby 方法。我可能想使用常量，或者在循环 user.enabled? 或 user.full_name 内的对象上调用其他 ruby​​ 方法，或者使用这些对象渲染部分内容等。

那么，如果所有 javascript 都在另一个文件中或在循环之外，这应该如何完成？我知道你可以使用 CSS 选择器在 javascript 中迭代一堆 div，但这不允许我在对象上调用 ruby​​ 方法。

我缺少什么？谢谢！

Answer 1

我认为应该使用“data-id”参数来完成，如本截屏视频所示
http://railscasts.com/episodes/229-polling-for-changes

Answer 2

对于您的特定示例，您已经在标记中编码了评论 ID，因为您将 div 元素的 ID 属性设置为评论 ID。所以你可以把 JavaScript 挂起来。

Answer 3

请原谅我使用 jquery，但是如果没有它或类似的库，Web 开发真的很糟糕

对于你的第一个抱怨（获取当前评论），javascript this 对我来说工作得很好。

onclick="my_function(this);"

在js文件中

my_function = function(target) {
    // clicked element passed in
    // now, let's get comment element by class
    var comment = $(target).parents('.comment');
}

至于第二个抱怨...我从来不经常需要它，但有时我在html中包含一些数据以供javascript使用。扩展前面的示例：

<div class="comment" comment_id="<%= comment.id %>"></div>

在 my_function 中

var comment_id = comment.attr('comment_id');

Answer 4

让您的客户端脚本采用“选项”对象作为参数。不要使用任何服务器端脚本；将脚本放入其自己的 .js 文件中。

然后使用输出 js 的服务器端脚本创建“选项”对象。包含您的脚本并调用其入口点函数，传入您的“选项”对象。

Answer 5

您只需要更多的 JavaScript 知识即可看到它的强大功能，尤其是 jQuery。我会解决你的例子：

<% @comments.each do |comment| %>
  <div class="comment">
    <%= comment.text %>
    <a href="reply.php?id=<%= comment.id %>" class="reply">Reply</a>
  </div>
<% end %>
<script type="text/javascript">
  $('.comment .reply').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var result = url.match(/\?id=(\d+)([^\d]|$)/);
    var id = (result && result[1]);
    if (id) {
      // do whatever you want to do with the id
    }
  });
</script>

好处：

（1）你没有到处都有javascript

（2）无需javascript即可工作