javascript - 拥有混合 Javascript 和 ruby​​ 的文件是否正确？ IE。 (.js.erb)？

Question

我最近读到在 JavaScript 中嵌入 ruby​​ 不是一个好主意。然而，在 David Heinemeier Hansson 的 Agile Web Development with Rails 等书籍中，这正是它所做的。如果将 ruby​​ 嵌入 JS 不是一个好主意，那么这种情况下的最佳做法是什么？给出像这样简单的东西:(jQuery + ruby​​)

posts_controller

def create
  @post = Post.new(params[:post])
    respond_to do |format|
      if @post.save
        format.html { redirect_to(@post, :notice => 'Post was successfully created.') }
        format.js #will use this response to process ajax
      else
        format.html { render :action => "new" }
      end
    end
end

create.js.erb

$tr = $('<tr>');
$td1 = $('<td>').text('<%= @post.title %>');  
$td2 = $('<td>').text('<%= @post.content %>');
$tr.append($td1, $td2);
$('table tbody').append($tr);

应该如何重构以遵循不将 ruby​​ 嵌入 JS 的“最佳实践”？(如果是这样的话)

我真的需要在这方面有所启发，也许要弄清楚概念，因为我读过 Rails 3.1 将通过 Assets 将 JS 与 Ruby 完全分开？(这是正确的吗？)

谢谢!

Answer 1

RJS 模板本质上是很长一段时间内完成事情的方式，这就是为什么您仍然在教程中看到这种技术如此流行的原因。话虽这么说，正如您所注意到的，他们正在走出去，而且有充分的理由。

我确信 RJS 模板非常糟糕的原因有很多，但一个重要原因是它们将您的 View JS 与您的 View HTML 耦合得有多紧密.许多问题由此产生，其中一些是:

1. 缺乏灵 active 。

   以您的代码为例。如果您希望能够从不同的 Angular 创建帖子怎么办？并有不同的效果？也许没有 <table>在所有页面上，您只想弹出一条“成功”消息？等等

   如果您只想要帖子的数据表示，但您的 javascript 模板是为操作 HTML 而编写的怎么办？

   你如何处理所有这一切create.js.erb ，这很可能与帖子 new.html.erb 紧密耦合模板？

2. 复杂性。

   RJS 模板在某种程度上是在真空中运行的。在服务器端生成，它们的执行不绑定(bind)到 DOM 事件。这使得执行诸如更新 <form> 之类的事情变得棘手。在创建对象后的页面上，因为您没有引用框架来选择适当的 <form>在 JS 模板中(例如 <form id="new_post_123"> )。有一些解决方法，但它们比需要的更复杂。

   通过绑定(bind)到表单客户端并处理结果，这个问题就被消除了。您无需在回复后找到合适的表格进行更新。

   对于 RJS，您没有这样的绑定(bind)，并且您被迫使用 HTML 的已知结构来检索和操作适当的元素。不必要的复杂性的一个例子。

---

关于您的问题:

I really need to be enlightened on this, and maybe get the concepts right because I have read that rails 3.1 will separate JS from Ruby completely through assets ?(Is this correct?)

这基本上是正确的。 Assets 管道虽然很酷，但并没有提供任何全新的东西。 Sprockets 和 Sass 等 Assets 框架及其支持的工作流已经存在了一段时间。 Rails 3.1 asset pipeline 只是将它们带入了标准实践。正如 DHH 在他最近的 RailsConf keynote 中谈到的，这更像是一个视角问题。 .通过对这些 Assets (尤其是 js 文件)进行更好的组织，它使它们感觉更像是一等公民，可以这么说，值得像您的后端代码一样受到关注。与 public/javascripts 的“垃圾抽屉”感觉相反.

---

至于实现:

你可以这样做(虽然未经测试并且有点简化，例如在 Rails 3 中你可以使用响应器而不是 respond_to block :

# as you have, but returning the object as data which can be handled client-side,
# rather than RJS generated by the server
def create
  @post = Post.new(params[:post])
  respond_to do |format|
    if @post.save
      format.js { render :json => @post }
    else
      # ...
    end
  end
end

// Then in your client side JS, a handler for your remote form.
$(function(){
  $('#your-create-form').bind('ajax:success', function(data, status, xhr) {
    // simply repeating what you had in the template, replacing the erb with
    // attributes from the returned json
    $tr = $('<tr>');
    $td1 = $('<td>').text(data.title);  
    $td2 = $('<td>').text(data.content);
    $tr.append($td1, $td2);
    $('table tbody').append($tr);
  });
}