jquery - 在 javascript 中嵌入 ruby

Question

我是 RoR 世界的新手。

尽管我已经使用 rails scaffold 生成了一些代码。我还可以使用 :remote => true 通过 ajax 发布表单。

表格被发布了，干净整洁!但我希望使用 link_to 呈现从我的 Controller 返回的一些数据，以便它创建到路由/资源的链接。

我已经尝试创建一个 .js.erb 文件并将代码嵌入其中，但它给了我一个错误提示:

undefined method `link_to'

.js.erb 中的代码

$(document).ready(function(){


$("#new_post").bind('ajax:success', function(xhr, data, status){ 
    console.log(data)
    if(data.errors){
        console.log("Error!")
    }
    else{
        var user_name = data.user; // json is contained in data variable        
        $("#recent_posts").prepend("<%= j link_to(user_name, '#') %>");
    }
});

});

我哪里错了？

Answer 1

我认为这里有几个错误来源:

undefined method `link_to'

这是非常不寻常的，因为 link_to 是一个标准的 View 助手。你确定 link_to 之前的空格真的是一个空格而不是某种其他不可见的字符吗(例如，当你在按住 的同时使用 space 时，有时会在 OSX 上得到这些字符>alt).此外，您的 js erb 必须在您的 Controller View 命名空间中，但由于它是在您呈现操作时执行的，所以情况似乎是这样。

$(document).ready(function(){

您不需要在 .js.erb 模板中使用它，因为没有触发就绪事件。如果 DOM 准备就绪，jQuery 会立即执行脚本，因此(通常)不会有什么坏处，只是没有必要。

$("#new_post").bind('ajax:success', function(xhr, data, status){

这是一个更大的问题。您现在附加处理程序的方式，将在每次提交表单和服务器返回数据时附加。因此，如果出现错误，表单被提交并第二次返回，您将看到 console 消息或 anchor 插入执行两次。所以最好为这种事件做好准备:

$("#new_post").not('.registered').addClass('registered').bind('ajax:success', function(xhr, data, status){

这将阻止多个事件处理程序。

然后是第三个问题:

var user_name = data.user; // json is contained in data variable        
$("#recent_posts").prepend("<%= j link_to(user_name, '#') %>");

在这里，您尝试在 erb 内联 ruby​​ 中使用您在 javascript 中分配的变量。这是行不通的，因为 ruby​​ 变量 user_name 是在呈现模板时在服务器端求值的。另一方面，当客户端从服务器接收到呈现的模板时，javascript 变量赋值在浏览器中进行评估。那么，您可以做什么？

link_to 并不是那么神奇。它只是呈现一个 anchor 标记。所以，同样可以这样写:

var user_name = data.user; // json is contained in data variable        
$("#recent_posts").prepend(["<a href='#'>", user_name, "</a>"].join(''));

到目前为止，还不错。但是，您遇到的最大问题是:服务器无法同时返回呈现的 .js.erb 模板 和 json 数据。因此，您在 javascript 函数中获得的数据将只是呈现的 .js.erb 模板字符串。在 JSON 中与服务器通信确实是最好的事情，所以让我们忘记 rails 集成表单处理并自己编写:

1. 从表单选项中删除:remote => true

2. 将 :format => :json 添加到您的 create 路由

   resources :posts, :only => [:create], :format => :json
   resources :posts, :except => [:create]
   

3. 在您的 Assets 中添加 javascript 以远程处理您的表单

   // after DOM ready
   
   var form = $('#new_post');
   form.on('submit', function(e) {
   
     $.ajax({
       url: form.prop('action'),
       type: form.prop('method') || 'POST' //for create action,
       data: form.serializeArray(),
       dataType: form.data('type') || 'json',
       success: function(data, status, xhr) {
             var user_name = data.user; // json is contained in data variable        
             $("#recent_posts").prepend(["<a href='#'>", user_name, "</a>"].join(''));
       },
       error: function(xhr, status, error) {
         console.log('error')
       }
     });
   
     return false; //prevent normal submit
   
   });
   

4. 现在您已准备好从服务器返回纯 JSON:

   render :json => resource.to_json(:include => :errors)