Jquery 在javascript中嵌入ruby

我是RoR世界的新手

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

表格贴出来了，又漂亮又干净！ 但我希望使用link_to呈现从控制器返回的一些数据，以便它创建到路由/资源的链接

我曾尝试创建一个.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, '#') %>");
    }
});

});

$（文档）.ready（函数（）{
$（“#new#post”）.bind（'ajax:success'，函数（xhr，数据，状态）{
console.log（数据）
if（data.errors）{
log（“错误！”）
}
否则{
var user_name=data.user；//数据变量中包含json
$（“#最近的#U帖子”）。前缀（“”）；
}
});
});

---

我哪里出错了？

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

undefined method `link_to'

这是非常不寻常的，因为

link\u to

是一个标准的视图辅助对象。您确定

link\u to

之前的空格实际上是一个空格，而不是某种不可见的字符（例如，在按住

alt

的同时使用

space

时，您有时会在OSX上看到这些字符）。此外，js-erb必须位于controllers视图名称空间中，但由于它是在呈现动作时执行的，所以情况似乎就是这样

$(document).ready(function(){

您不需要在

.js.erb

模板中使用它，因为没有触发就绪事件。如果DOM已经准备好了，jQuery会立即执行脚本，所以它不会有任何伤害（通常），只是没有必要

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

这是一个更大的问题。按照现在附加处理程序的方式，每次提交表单和服务器返回数据时都会附加处理程序。因此，如果出现错误，并且表单第二次被提交和返回，您将执行

控制台

消息或锚插入两次。因此，最好为此类活动做好准备：

$("#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, '#') %>");

到目前为止，一切顺利。但最大的问题是：服务器不能同时返回呈现的

.js.erb

模板和

json

数据。因此，在javascript函数中获得的数据将只是呈现的

.js.erb

模板字符串。在

JSON

中与服务器通信确实是最好的事情，所以让我们忘记rails集成的表单处理，自己编写：

从表单选项中删除

：remote=>true

将

：format=>：json

添加到

创建

路由

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

在远程处理表单的资产中添加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

});

---

你能包括你的

.js.erb

文件的代码吗？解决这个问题后，你可能想把Ruby代码放在引号里，以免破坏你的.prepend（）。js.erb文件的路径是什么？如果它不在app/views/_controller\u name\中，则您可能不在可访问视图帮助器方法（如link\u to）的范围内。要测试是否是这种情况，请尝试显式调用作用域，方法是将

link\u To

替换为

ActionController:：Base.helpers.link\u To

我尝试过：$（“#最近的#u帖子”）。prepend（“”），但不起作用！谢谢。我想要link_to选项，以便可以将其引用到资源路径。。无论如何，你的回答更有意义。干杯

// 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

});

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