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'))

このようなものはすべて期待どおりに機能します。関連する jQuery .sortable では、uploadedResources が適切に使用されています。ただし、アップロード ウィジェットはテキスト入力として再レンダリングされ、アップロードされたファイルの URL が入力フィールドに表示されます。ドキュメントの例を見ると、これが意図した動作ではないことがわかります。私がやりたいことは、アップロード ウィジェットを使用してファイルを .sortable に追加し続けることができるようにすることです (この時点で、ユーザーがアップロードされたファイルを複製できるようにすることは完全に許容されます。_.union call はまだ提案された仕事を実際に行っていません)

ここで何がレンダリング プロセスを台無しにしているかわかりません: Meteor テンプレートの問題ですか? ブートストラップ? または、ウィジェットコードで正しいことをしていませんか? また、フォームを {{#isolate}} および {{#constant}} ディレクティブ (および両方を一緒に) でラップしようとしましたが、役に立ちませんでした。

filepicker.constructWidget() を template.rendered イベント ハンドラーに追加すると、問題なく動作します。ただし、これがどのように正しく機能するかを知ってうれしいです...つまり、テンプレートでウィジェットを宣言した方がはるかに読みやすいようです。

4

0 に答える 0