locked
How to update listview item on download progress? RRS feed

  • Question

  • Given this fairly simple code (based on the GridTemplate)

    var list = new WinJS.Binding.List();
        var groupedItems = list.createGrouped(
            function groupKeySelector(item) { return item.operation.group; },
            function groupDataSelector(item) { return item.operation.group; }
        );
    
        var BackgroundDownloader = Windows.Networking.BackgroundTransfer.BackgroundDownloader;
        var BackgroundTransferStatus = Windows.Networking.BackgroundTransfer.BackgroundTransferStatus;
        
        // TODO: Replace the data with your real data.
        // You can add data from asynchronous sources whenever it becomes available.
        BackgroundDownloader.getCurrentDownloadsAsync().done(function (downloadOperations) {
            downloadOperations.forEach(function (downloadOperation) {
                var download = new Download();
                download.attach(downloadOperation);
                list.push(download);
            });
        });

    function Download(operation) {
            var operation;
            var operationPromise;
            var guid;
            var title;
            var progress;
    
            this.start = function (uri, localFile) {
                this.title = uri.absoluteUri;
                WinJS.Application.local.folder.createFileAsync(localFile, Windows.Storage.CreationCollisionOption.generateUniqueName).done(function (newFile) {
                    var downloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
                    operation = downloader.createDownload(uri, newFile);
                    
                    operationPromise = operation.startAsync().then(oncomplete, onerror, onprogress);
                }, error);
            }
    
            this.attach = function (operation) {
                this.operation = operation;
                this.guid = operation.guid;
                this.title = operation.requestedUri.absoluteUri;
                this.operationPromise = operation.attachAsync().then(oncomplete, onerror, onprogress);
            }
    
            this.cancel = function () {
                if (operationPromise) {
                    operationPromise.cancel();
                    operationPromise = null;
                }
            }
    
            this.pause = function () {
                if (operation) {
                    if (operation.progress.status === BackgroundTransferStatus.running) {
                        operation.pause();
                    }
                }
            }
            
            function oncomplete () {            
            }
    
            function onerror(error) {
            }
    
            function onprogress() {
                progress = operation.progress;
                //todo: update item in listview
            }
    
        }
        

    how do I update the listviews item in the progress handler? I tried list.notifyMutated but it did not do anything and progress.bytesReceived is "undefined".

    My template looks like this:

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            <div class="item">
                <!--img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" /-->
                <div class="item-overlay">
                    <h4 class="item-title" data-win-bind="textContent: title"></h4>
                    <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: progress.bytesReceived"></h6>
                </div>
                <progress data-win-bind="value: progress.bytesReceived; max: progress.totalBytesToReceive"> </progress>
            </div>
        </div>


    • Edited by phil_ke Monday, October 1, 2012 2:06 PM
    Monday, October 1, 2012 2:06 PM