1

我有一个 Ember.js 控制器，我正在尝试通过 jquery 文件上传将文件发送到我的 rails 控制器。

我从这个开始：

myControllerAction: ->
  $('#fileupload').fileupload(
    url: "/api/v1/comics"
    dataType: 'json'
    formData:
      comic: {
        title: self.get('comicTitle')
        prompt_one_id: self.get('prompts')[0].get('id')
        prompt_two_id: self.get('prompts')[1].get('id')
      }
    )

哪个确实有效，但它会在选择文件后立即发送表单。我想在用户提交表单时完成这一切。所以我尝试了这个：

  didInsertElement: ->
    $('#fileupload').fileupload(
      url: "/api/v1/comics"
      dataType: 'json'
      formData:
        comic: {
          title: self.get('comicTitle')
          prompt_one_id: self.get('prompts')[0].get('id')
          prompt_two_id: self.get('prompts')[1].get('id')
        }
      add: (e, data) ->
        data.submit()
      progressall: (e, data) ->
        progress = parseInt(data.loaded / data.total * 100, 10)
        $('#progress .bar').css('width', progress + '%')
    )

   myControllerAction: ->
    self = @
    $('#fileupload').fileupload('add')

然而，这是行不通的。它抛出一个javascript错误：

Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'add'

我认为在元素插入上设置所有内容将初始化对象。所以我不确定我哪里出错了。有人有什么建议吗？

编辑：添加模板

    <form enctype="multipart/form-data">
      <div class="control-group">
        <label class="control-label" for="inputTitle">Title</label>
        <div class="controls">
          {{input type="text" valueBinding="comicTitle"}}
          {{input type="file" id="fileupload" valueBinding="comicFile"}}
        </div>
      </div>
      <button {{action myControllerAction}} id="upload_comic" class="btn btn-inverse">Upload Comic</button>
      <div id="progress">
        <div class="bar" style="width: 0%;"></div>
      </div>
    </form>
4

1 回答 1

0

不确定错误的原因是什么，但尝试使用afterRender回调来解决。也使用this.$('#fileupload')代替$('#fileupload'). 代码：

  didInsertElement: ->
    Ember.run.scheduleOnce('afterRender', this, 'setupFileUpload')

  setupFileUpload: ->
    $('#fileupload').fileupload(
      url: "/api/v1/comics"
      dataType: 'json'
      formData:
        comic: {
          title: self.get('comicTitle')
          prompt_one_id: self.get('prompts')[0].get('id')
          prompt_two_id: self.get('prompts')[1].get('id')
        }
      add: (e, data) ->
        data.submit()
      progressall: (e, data) ->
        progress = parseInt(data.loaded / data.total * 100, 10)
        $('#progress .bar').css('width', progress + '%')
    )
于 2013-07-17T20:08:03.910 回答