流星上传清除/重置表单数据

时间:2015-12-24 21:03:37

标签: javascript mongodb meteor

问题: meteor中的表单数据是使用链接点击设置的,但是在单击新链接时不会重置/更新。这会导致所有后续链接点击指向初始单击的文档(而不是新单击的文档),因为formData在每次单击后都不会更新/重置

我有一个测试网络应用程序(http://meteorpad.com/pad/ckgN6GL4msQn4Ms5h/Jobs),其中导航菜单中的链接从集合中调用不同的文档并显示数据

部分数据显示是上传部分。单击链接时,该文档的ID将存储在会话变量中。然后它在formData中作为id传递,以便上传者可以创建一个与文档id同名的目录。然后,为该文档上传的文件将存储在该特定文件夹中

这适用于我点击的第一个链接。文件上传到带有其名称的子目录。但是,当我单击一个新链接时,我上传的任何文件都会上传到第一个文档目录

我相信这是因为表单没有重新加载,因此formData仍然具有第一个单击文档链接的ID。

通过这种设置,如何在单击链接时重置表单数据,以便始终传递最新的ID,而不是第一个?

在此代码中,单击链接时,其ID将存储在会话变量中:

Template.job.events({
        "click #jobItem": function(event){
            Session.set("selectedJob", this._id);
        }
    });

文档信息显示时带有如下模板:

<template name="summary">
  {{#with summary}}
  <div id="summaryContainer">
    <p>Name: {{name}}</p>
    <p>Created at: {{createdAt}}</p>
    <p>Username: {{username}}</p>
    <p>Script location:</p>
    {{> upload_bootstrap multiple=false formData=specificFormData}}
    <p>Upload file location:</p>

    <button class="deleteJob">Delete Job</button>
    <button class="saveJob">Save</button>
    <button class="startJob">Start</button>
  </div>
  {{/with}}
</template>

所以名为specificFormData的上传表单是一个摘要模板助手函数:

Template.summary.helpers({
        summary: function(){
            var curJob = Session.get("selectedJob");
            return Jobs.findOne( { _id:curJob } );
        },

        specificFormData: function(){
            return({
                id: Session.get("selectedJob")
            })
        }
    });

上传器定义使用从会话变量中提取的formData ID创建一个子目录:

Meteor.startup(function () {
    var dir = '/job/';

    UploadServer.init({
        uploadDir: process.env.PWD + dir,
        tmpDir: process.env.PWD + dir + 'tmp/',
        checkCreateDirectories: true,
        getDirectory: function(fileInfo, formData){
            return formData.id;
        }
    });
});

因此,首次单击作业时,会存储会话变量。然后,显示页面仅从集合中提取文档信息。表单数据存储ID并使用作业ID创建子目录。再次单击链接时,表单数据ID不会重置,并尝试上载到相同的先前目录而不是新单击的文档目录。 应根据点击的作业

上传到其他子目录

1 个答案:

答案 0 :(得分:2)

我认为这是一个错误,根据this issue它应该已在tomi:upload-jquery v2.2.0修复,但似乎仍然如您的示例所示。

这是另一种解决方案。使用callbacks代替formData,并使用表单数据作为模板助手添加回调函数。

main.html中

<template name="summary">
    {{> upload_bootstrap multiple=false callbacks=myCallbacks}}
</template>

common.js

Template.summary.helpers({
    myCallbacks: function() {
        return {
            formData: function() { return({id: Session.get("selectedJob")}) }
        }
    }
});