1

在前端使用引导程序在 Meteor 中构建应用程序，我在文件选择器小部件中遇到了一些令人困惑的行为。它需要一个明显的时间间隔才能正确呈现，但更麻烦的是，在上传完成后，小部件呈现不正确，并且无法上传更多内容。

——后来的工作发现了一个重要的事实！当模板本身重新呈现时，小部件会中断，无论它是由上传还是由页面上的其他交互引起的。

这是标记：

 <form class="form-horizontal">
     <div class="control-group" >
        <label class="control-label" for="uploadButton">
          Uploads &nbsp
        </label>
        <div class="contols" > 
          <input type="filepicker-dragdrop"
             data-fp-button-class="btn"
             data-fp-drag-text="Drop files here"
             data-fp-drag-class="span5"
             data-fp-multiple="true" id="uploadButton"/>
        </div>
      </div>
 </div>

和客户端代码（来自事件映射）：

 'change #uploadButton' : (event) ->
            console.log JSON.stringify event.fpfiles

            resources = _.map(event.fpfiles, (file) ->
                    url : file.url
                    title : ""
                    date : ""
                    media : ""
                    size : "")
            Session.set('uploadedResources', _.union(resources, Session.get 'uploadedResources'))

这些东西都按预期工作--uploadedResources 在相关的 jQuery .sortable 中正确使用；但是，上传小部件被重新呈现为文本输入，上传文件的 URL 在输入字段中。查看文档上的示例表明这不是预期的行为。我想要做的是确保我可以简单地继续使用上传小部件将文件添加到 .sortable （此时让用户可以复制上传的文件是完全可以接受的——我意识到 _.union call 实际上还没有做提议的工作）

我不确定是什么搞砸了这里的渲染过程：是 Meteor 模板问题吗？引导程序？还是我对小部件代码做的不对？我还尝试将表单包装在 {{#isolate}} 和 {{#constant}} 指令（以及两者一起）中，但无济于事。

如果我将 filepicker.constructWidget() 内容添加到 template.rendered 事件处理程序，一切正常；但是，我很高兴知道它是如何正常工作的……也就是说，我宁愿在模板中声明小部件，这似乎更具可读性。

4

0 回答 0