0

各バックボーン ビューの進行状況バーで構成される ajax アップロード コンポーネントを作成しています。これがビュー テンプレートの外観です。

<script id="view-template-dropped-file" type="text/html">
    <a><%=name %></a><span><%=fileSize%></span>
    <div class="ui-progress-bar">
        <div class="ui-progress"></div>
    </div>
</script>

ドロップ領域にファイルをドロップすると、次のように各ファイルのビューを作成します

for (i = 0; i < files.length; i++) {
    var view = new DroppedFileView({
        model: new DroppedFile({
            name: files[i].name,
            fileSize: files[i].size
        })
    });
    var $li = view.render().$el;
    $('#droparea ul').append($li);
});

いくつかのファイルが追加されたドロップ領域に、各ファイルの進行状況バーが表示されます。http://cl.ly/Lf4v

アップロードを押すと、各ファイルの進行状況を個別に表示する必要があります。

私がやろうとしたことは、このように DroppedFileView のイベントにバインドすることでした

initialize: function() {
    var app = myapp.app;
    app.bind('showProgress', this._progress, this);
}

および _progress 関数

_progress: function(percentComplete) {
    this.$el.find('.ui-progress').animateProgress((percentComplete * 100), function () { }, 2000);
}

これがドロップエリアビューからイベントをトリガーする方法です

xhr: function () {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (e) {
        if (e.lengthComputable) {
            var percentComplete = e.loaded / e.total;
            app.trigger('showProgress', percentComplete);
        }
    }, false);
    return xhr;
}

もちろん、すべてのビューで同じ showProgress イベントをリッスンすると、すべての進行状況バーに同じ進行状況が表示されるため、これは機能しません。

では、進行状況を個別に更新できるようにイベントを指定されたビューにバインドすることは可能ですか、それともイベントは良いアプローチではありませんか?

4

1 に答える 1

0

DroppedFileモデルが進行状況イベントを発行するようにすることを検討することをお勧めします。したがって、単純に でイベントをトリガーする代わりに、appアップロードされているモデル インスタンスでトリガーします。

サンプル コードでは、メソッドを保持するクラスについて言及していませんがxhr、モデル自体で定義することは理にかなっています。その場合、イベントのトリガーは簡単です。

xhr: function () {
    var model = this;
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (e) {
        if (e.lengthComputable) {
            var percentComplete = e.loaded / e.total;
            model.trigger('showProgress', percentComplete);
        }
    }, false);
    return xhr;
}

そしてビューコンストラクターで：

initialize: function() {
    this.model.bind('showProgress', this._progress, this);
}

コメントに基づいて編集：

ビュー構造が上記で想定したよりも少し複雑であっても、私の意見では、DroppedFileモデルをイベント エミッターとして使用するのが最善の方法です。1 つDroppedFileViewが を表しDroppedFileている場合、意味のあるモデルの状態を反映する必要があります。

. _ DropzoneView_ DropzoneView.files実際の AJAX リクエストをビューの責任にするか、個々のモデルにリファクタリングするかは問題ではありません。

于 2012-12-17T20:55:22.977 に答える