javascript - 使用 Backbone 上传文件

Question

我在 Rails 应用程序中使用 Backbone.js，我需要将文件上传作为其中一个 Backbone 模型的一部分。

我不相信 Backbone 允许开箱即用的多部分文件上传。有没有人设法通过一些插件或另一个外部库让它工作？我如何扩展 Backbone.js 来支持它？

Answer 1

在使用不同方法试用几个月后回答我自己的问题。我的解决方案如下(使用 Rails)。

对于任何需要文件上传的表单，我会设置 data-remote="true" 和 enctype="multipart/form-data" 并包含 rails.js和 jquery.iframe-transport.js .

使用 rails.js 设置 data-remote="true"允许我绑定(bind)到 ajax:success 并在成功时创建 Backbone.js 模型。

HTML:

<form action="/posts.js" method="post" data-remote="true" enctype="multipart/form-data">
  <input type="text" name="post[message]" />
  <input type="file" name="post[file]" />
  <button>Submit</button>
</form>

JavaScript:

您显然应该绑定(bind) ajax:error 来处理错误情况。

对我来说，数据在 ActiveRecord 模型中进行了清理，所以不必太担心 eval 语句。

$('form').bind('ajax:success', function(event, data) {
  new Model(eval(data)); // Your newly created Backbone.js model
});

Rails Controller :

class PostsController < ApplicationController
  respond_to :js

  def create
    @post = Post.create(params[:post])
    respond_with @post
  end
end

Rails View (create.js.haml):

使用 remotipart gem 。

这将处理表单上传文件并设置了 enctype 和未设置的情况。

您可以选择在此处对您的响应调用sanitize。

= remotipart_response do
  - if remotipart_submitted?
    = "eval(#{Yajl::Encoder.encode(@post)});"
  - else
    =raw "eval(#{Yajl::Encoder.encode(@post)});"