如何在Ruby中使用jQuery变量？

Question

当我尝试访问ruby中的javascript变量时，显示未定义的变量错误。

我试图在红宝石代码“ phone＃{x}”中访问变量x

var x = 1;

$(add_button).click(function(e){ //on add input button click
  e.preventDefault();
  if(x < max_fields){ //max input box allowed

    x++;

    $(wrapper).append('<div class="sampleclass"><%= f.label :"phone#{x}", class: "control-label col-md-3" %><div class="col-md-8"><%= f.text_field :"phone#{x}", class: "form-control" %><a href="#" class="remove_field">Remove</a></div></div>'); //add input box
  }
});

我希望输出电话＃{x}到phone2

Answer 1

您的期望是完全错误的-Ruby（ERB）在服务器上执行，而此javascript稍后在客户端上执行。

您无法在javascript erb模板中即时读取javascript变量。 它只是字符串插值的高级版本，它以与HTML相同的方式呈现javascript。 它实际上并不执行生成的代码。

更好的选择是使用ERB生成模板字符串并使用javascript修改元素。

var x = 1;
$(add_button).click(function(e){ //on add input button click
  var $template = $('<div class="sampleclass"><%= f.label :phone", class: "control-label col-md-3" %><div class="col-md-8"><%= f.text_field :phone, class: "form-control" %><a href="#" class="remove_field">Remove</a></div></div>');
  e.preventDefault();
  if(x < max_fields){ //max input box allowed
    x++;
    $template.find('label').text("phone " + x);
    $template.find('input').attr(name: "phone_" + x);
    $(wrapper).append(template); //add input box
  }
});

Answer 2

除非它是* .js.erb之类的东西，否则您不能在* .js文件中使用rails标记。

我可以弄清楚您要在这里完成的工作。 您必须使用HTML随时随地制作整个元素。

您可以使用类似这样的东西。

    $(wrapper).append('<div class="sampleclass"><label class="control-label col-md-3"> Phone'+ x +' </label><div class="col-md-8"><input type=text name="phone'+ x +'" class="form-control"><a href="#" class="remove_field">Remove</a></div></div>');

添加一个示例，说明代码的外观。