Backbone.js 视图中的回形针 image.url答案

【问题标题】：Paperclip image.url in Backbone.js ViewsBackbone.js 视图中的回形针 image.url
【发布时间】：2012-04-09 23:32:54
【问题描述】：

我正在使用回形针保存图像。一切正常，我可以使用@item.image.url 访问该项目的 url。

class Item
 has_attached_file :image, :styles => {
      :original => ['1920x1680>', :jpg],
      :small => ['100x100>', :jpg],
      :medium => ['250x250>', :jpg],
      :large => ['500x500>', :jpg]
    }
end

这是控制台：

> Item.last.image.url(:small)
=> "/system/images/items/1/small/chanel.jpg?1334005208"

如果我从服务器模板化 HAML 或 ERB 并像这样将页面提供给用户，这将非常简单明了。项目/show.html.haml：

.item
  .item-image
    = image_tag @item.image.url(:small)

但是，使用backbone.js，我无法构造URL，因为我没有上下文中的回形针助手。本质上，我将图像的以下属性以 json 形式发送到页面。

#<Item:0x007fc97559b960> {
                    :id => 1,
    :image_content_type => "image/jpeg",
       :image_file_name => "chanel.jpg",
       :image_file_size => 28880,
      :image_updated_at => 2012-04-09 21:00:08 UTC
}

将 image.url 作为属性包含在项目上的忍者方法是什么。如何解释样式 URL？最好有一个像“image_small_url”、“image_normal_url”等预先确定和可访问的属性。想法？

【问题讨论】：

如何将图片的属性以json形式发送到页面？

标签： ruby-on-rails ruby-on-rails-3 ruby-on-rails-3.1 backbone.js paperclip

【解决方案1】：

我正在使用 Jbuilder 为我正在处理的项目构建 JSON 视图，因此我的 index 视图如下所示：

json.array!(@things) do |json, thing|
  json.id thing.id
  json.name thing.name
  json.description thing.description
  json.image_url thing.image.url
  json.thumb_url thing.image.url(:thumb)
end

这样，在我的 Backbone 模板中，我只能说 thing.get('image_url') 和 thing.get('thumb_url')。

简而言之，您需要使用 Jbuilder 之类的东西，或者在您的模型中手动覆盖 as_json。就个人而言，我喜欢在视图级别处理这个问题，这是 Jbuilder 允许您轻松完成的事情。

【讨论】：

谢谢！非常有帮助。 Model.to_json 也是过滤掉 :encoded_password 等敏感属性的好地方。太棒了。
另请注意，通常建议覆盖Model.as_json 而不是Model.to_json，因为to_json 使用as_json 来实际创建所需的数据结构。
如何在 show.jst.ejs 文件中获取 image_url。 show_view.js.coffee 正在重新调整 @$el.html(@template(@model.toJSON() )) 并在 show.jst.ejs 文件中将详细信息显示为 ..... 如何在显示页面中显示 photo_url

【解决方案2】：

虽然在控制器中生成 JSON 是可行的，但我非常更喜欢将这种功能封装在装饰器中（例如，Draper）或为 RESTful 资源设计的框架中（例如，@987654322 @)。

这使模型与其外部表示之间的映射保持高度本地化，允许在 Web 应用程序框架之外直接测试表示，等等。

例如，clem 的答案将被隔离在一个类中，大致如下：

class ThingDecorator < Draper::Decorator
  delegate_all

  def image_url; object.image.url;         end
  def thumb_url; object.image.url(:thumb); end
end

然后在控制器中，例如：

@things = Thing.some_scope.decorate # Or
@things = ThingDecorator.decorate_collection(Thing.all)

（或者您需要的任何内容，具体的工作方式取决于 Rails 版本，请参阅 Draper 文档。）

然后使用常规方式将集合公开为 JSON。 IMO 这几乎总是更干净。

【讨论】：

【解决方案3】：

另一个使用jbuilder的简单示例：

# index.json.jbuilder
json.array!(@shared_snap_casts) do |shared_snap_cast|
  json.extract! shared_snap_cast, :id, :snap
end

这里的:snap 是回形针附件 - 此示例的输出为：

[{"id":1,"snap":"/system/shared_snap_casts/snaps/000/000/001/original/some_icon.png?1388093936"}]

希望这会有所帮助！

【讨论】：