控制器中的实例变量传递给引导文件输入插件

Question

我正在使用 bootstrap3 和一个名为 file-input 的特定引导插件。我正在使用文件输入和回形针将餐厅的图片附加到我的餐厅模型中。

我想做的一件事是让我的用户在编辑餐厅图像时能够看到旧的餐厅图像（存储在 @restaurant.image.url 中）。阅读文档后，我发现我可以通过像这样传入源来将默认图像设置为文件输入：

initialPreview: [
    "<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>",
    "<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>",
],

我坚持的是如何将我的@restaurant.image.url 放入 javascript 数组的 src 属性中，然后我可以将其传递到文件输入插件中。

我发现了this 问题，看起来如果我将restaurant.js 文件转换为restaurant.js.erb 文件，我可以只使用ruby 表达式。

javascript

("#image_upload").fileinput( initialPreview: ["<img src='<%= @restaurant.image.url %>' class='file-preview-image'>",]);

但是 @restaurant 在我的 javascript 文件中是空白的。有人知道为什么吗？

我用的是rails 4，不知道有没有区别。

Answer 1

首先，位于资产文件夹中的文件无权访问控制器中定义的实例变量。但是，控制器调用的视图可以。一种简单的解决方案（尽管 Rails 纯粹主义者可能会斩首我）是将 javascript 直接内联到您的部分表单中。

在你的_form.html.erb

<script>
  $(document).ready(function(){
      img_source = "#{defined?(@restaurant) && @restaurant.image.exists? ? @restaurant.image.url : image_url('default_image.jpg')}"
      $("#image_upload").fileinput( initialPreview: ["<img src='"+img_source+"' class=\'file-preview-image\'>"]);
});
</script>

注意：我确实添加了默认图像（因为您使用的是回形针）；相应地修改。

更复杂的解决方案可能涉及诸如 gon 之类的 gem，它可以帮助您将变量传递给 javascript 函数。