使用$(this)和咖啡脚本

时间:2014-03-21 22:10:27

标签: javascript jquery coffeescript jquery-file-upload jquery-fileupload-rails

我正在使用查询文件上传。我在页面上有几个表单,除了一个名为“project”的隐藏字段外,每个表单都相同。以下是处理上传的咖啡脚本:

jQuery ->
  $(document).ajaxComplete ->
    $('.project_file').fileupload
      dataType: "script"
      url: ($(this).prev('form').attr("action"))
      paramName: 'file_yo'
      formData: (form) -> 
        [{ name: 'authenticity_token',  value: $('meta[name="csrf-token"]').attr('content')}, { name: 'project',value: $(this).prev().val()}]
      alert($(this).prev().val())
      done: (e, data) ->
        $('#finish-text').html "Upload finished"

这是其中一个表单的html。唯一从from变为form的是被称为'project'的隐藏字段的值。

<form accept-charset="UTF-8" action="/projects/6/project_files" class="edit_project" data-remote="true" id="project_file_form" method="post"><div style="margin:0;padding:0;display:inline">        <input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="patch"><input name="authenticity_token" type="hidden" value="iIQXYRJfXRFAaSsvSpb4H+HEUMeAI3pubXDRyd+2Ehk="></div>
    <input id="project" name="project" type="hidden" value="6">
    <input authenticity_token="true" class="field file-field project_file" id="" name="file_yo" title="" type="file" value="">  
</form>

问题是$(this)未定义。当警报出现时,它表示未定义。如何让$(this)返回具有类'project_file'的特定元素呢?

更新:

以下是咖啡脚本编写的内容:

(function() {
  jQuery(function() {
    $(document).ajaxComplete(function() {
      return $('.project_file').fileupload({
        dataType: "script",
        url: $(this).prev('form').attr("action"),
        paramName: 'file_yo',
        formData: function(form) {
          return [
            {
              name: 'authenticity_token',
              value: $('meta[name="csrf-token"]').attr('content')
            }, {
              name: 'project',
              value: $(this).prev().val()
            }
          ];
        }
      }, alert($(this).prev().val()));
    });
    return {
      done: function(e, data) {
        return $('#finish-text').html("Upload finished");
      }
    };
  });

}).call(this);

2 个答案:

答案 0 :(得分:0)

请注意,在您致电$('.project_file').fileupload()时会评估这些选项,因此即使$(this)符合您的预期,您也需要在每个上传器上设置完全相同的url 。我不认为ajaxComplete设置任何特定的上下文,因此回调中的this本身并不是非常有用。

如果您想为每个实例提供不同的选项,那么您必须这样说:

$('.project_file').each ->
  $(@).fileupload
    #... $(@) should be what you want in here

我不知道为什么你有这个约束ajaxComplete但是乍一看似乎很奇怪,我希望这可以由$(document).ready(...)直接处理。

答案 1 :(得分:-1)

您忘记缩进alert,看看您的代码编译为:

jQuery(function() {
  return $(document).ajaxComplete(function() {
    return $('.project_file').fileupload({
      dataType: "script",
      url: $(this).prev('form').attr("action"),
      paramName: 'file_yo',
      formData: function(form) {
        return [
          {
            name: 'authenticity_token',
            value: $('meta[name="csrf-token"]').attr('content')
          }, {
            name: 'project',
            value: $(this).prev().val()
          }
        ];
      }
    }, alert($(this).prev().val()), {
      done: function(e, data) {
        return $('#finish-text').html("Upload finished");
      }
    });
  });
});