使用Backbone上传文件

Jey*_*ran 30 javascript ruby-on-rails backbone.js

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

我不相信Backbone允许开箱即用的多部分文件上传.有没有人设法通过一些插件或其他外部lib工作?如何扩展Backbone.js以支持此功能?

Jey*_*ran 20

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

对于任何形式的需要文件上传我会成立data-remote="true",并enctype="multipart/form-data"与包括rails.jsjquery.iframe-transport.js.

data-remote="true"使用rails.js进行设置允许我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>
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

您显然应该绑定ajax:error以处理错误情况.

对我来说,数据在ActiveRecord模型中被清理,因此不必过于担心该eval语句.

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

Rails控制器:

class PostsController < ApplicationController
  respond_to :js

  def create
    @post = Post.create(params[:post])
    respond_with @post
  end
end
Run Code Online (Sandbox Code Playgroud)

Rails视图(create.js.haml):

使用remotipart宝石.

这将处理表单执行文件上传时enctype设置的情况,以及何时不设置.

您可以选择sanitize在此处致电您的回复.

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