Javascript 敲除viewModel返回未定义的

我正在开发一个web应用程序，尝试将文件上载到服务器。
我试图创建一个新的

ViewModel

对象，但它仍然显示

未定义

这是我的

ojprogresslist.js

：

"use strict";
define(['ojs/ojcore', 'jquery', 'knockout', 'ojs/ojcomposite','resources/components/file-upload-custom/viewModel.js', 'ojs/ojknockouttemplateutils','ojs/ojcomponentcore', 'ojs/ojlistview', 'ojs/ojprogress'], 
       function(oj, $, ko, Composite, viewModel, KnockoutTemplateUtils)
{


 var deleteButton= 
 " <oj-button id='btn1' chroming='half' display='icons' on-oj-action='[[deleteItem]]'>"+
 " <span class='oj-component-icon oj-panel-remove-icon'></span>"+
 "</oj-button>";


var progressItemView =
  "    <div class='oj-flex oj-sm-justify-content-space-between'>" +
  "      <div class='oj-flex-item oj-flex oj-sm-flex-direction-column'>" +
  "        <span data-bind='text: $properties.data.name' class='oj-progresslist-name'></span>" +
  "        <div data-bind='text: message' class='oj-progresslist-error-message'></div>" +
  '      </div>' +
  "      <div class='oj-flex oj-sm-align-items-center'>" +
  "        <oj-bind-slot name='itemInfo'>" +
  "          <div class='oj-flex-item oj-flex oj-progresslist-info'>" +
  "            <span data-bind='text: $data.getSizeInBKMGT($properties.data.size)'></span>" +
  '          </div>' +
  '        </oj-bind-slot>' +
  "        <div class='oj-flex-item oj-flex'>" +
  "          <oj-progress-status status='{{status}}'" +
  "                              progress='{{progress}}'>" +
  '          </oj-progress-status>' +
  '        </div>' +
  '      </div>' +
    deleteButton +
  '    </div>';


function progressItemViewModel(context) {
  var self = this;
    this.deleteItem=function(event){
         viewModel.deleteList(); // this is undefined
    };
    };

define([
    'knockout',
    'ojs/ojcore',
    'jquery', 'ojs/ojarraydataprovider', 'fileUploadTransport/MockTransport', 'fileUploadTransport/MockUploadXhr', 
    'fileUploadTransport/MockTransportItem', 'ojs/ojknockout', 'ojs/ojtoolbar', 'ojs/ojbutton', 'ojs/ojfilepicker', 'resources/js/ojprogresslist'],
     function (ko, oj, $, ArrayDataProvider, Transport, MockUploadXhr) {

    'use strict';

    function ComponentModel(context) {
        var self = this;

        self.noData = ko.observable(true);
        self.isSimulateError = ko.observableArray([]);
        self.koArray = ko.observableArray([]);

        //create file upload data provider
        self.dataProvider = new ArrayDataProvider(self.koArray, {keyAttributes: 'item'});

        //add or remove files
        self.dataProvider.addEventListener('mutate', function(event) {
          if (event.detail.add != null) {
            self.noData(false); // enable clear button
          }
          else if (event.detail.remove != null) {
            self.dataProvider.getTotalSize().then(function(size) {
              if (size == 0) {
                self.noData(true); //disable clear button
              }
            });
          }
        });


        var options = {
          maxChunkSize: 3000000,  //for chunkupload
          xhr: MockUploadXhr
        };

        var transport = new Transport(options);

        self.status = 200;
        function getStatus() {
          if (self.isSimulateError().length) {
            self.status = (self.status !== 401) ? 401 : 405;
          }
          else {
            self.status = 200;
          }
          return self.status;
        };

        //add a filesAdd listener for upload files
        self.selectListener = function(event) {
          var files = event.detail.files;
          if (files.length > 0) {
            var fileItems = transport.queue(files);

            //add the new files at the beginning of the list
            for (var i = 0; i < fileItems.length; i++)
            {
              self.koArray.unshift(fileItems[i]);
            }
            //simulate error status
            transport.setErrorStatus(getStatus());

            //upload files
            transport.flush();
          }
        };

        //clear file items from the data provider
        self.filterRemove = function(statusList) {
          var dataProvider = self.dataProvider;

          //remove all data rows
          if (! statusList || statusList.length == 0) {
            return self.koArray.removeAll();
          }

          var statuses = {};
          for (var i = 0; i < statusList.length; i++) {
            statuses[statusList[i]] = true;
          }

          //In this demo we only fetch up to 25 data rows, 
          //however you can fetch any number of rows that is right for your app
          var asyncIterable = dataProvider.fetchFirst({size:25})[Symbol.asyncIterator]();
          return asyncIterable.next().then(
            function (fetchResults) {
              var data = fetchResults.value.data;
              for (var i = 0; i < data.length; i++) {
                var progressItem = data[i];
                if (statuses[progressItem.status])
                  self.koArray.remove(progressItem);
              }
          })
        };

        //clear file items from the progress list
        self.clearProgressList = function(event) {
           console.log("hello world"+event);
          self.filterRemove(['loaded', 'errored']);
        };

        self.deleteList = function() {
           console.log("hello world");
          self.filterRemove(['loaded', 'errored']);
        };


    }

    return ComponentModel;


});

这是我的HTML：

<div style="padding-top:10px"></div>
    <label for="progressList">File Upload Status</label>
    <div style="padding-top:5px"></div>
    <oj-progress-list id="progressList" data="[[dataProvider]]">             
    </oj-progress-list>
</div>          

文件上载状态

我正在调用

viewModel.deleteList（）

从

ojprogresslist.js

文件到

filecustom.js

。我需要调用

deleteList

函数从

ArrayDataProvider

中删除项目

但我得到的错误是

未定义

---

您能帮助我吗？

查看viewModel的代码，您返回的函数

ComponentModel

从未调用过该方法（如果requirejs为您这样做，我记不得了）。因此，我猜测

ojprogresslist.js

应该看起来像

function progressItemViewModel(context) {
  var self = this;
    this.deleteItem=function(event){
         //not sure if the context that is passed in to the parent function  is what is expected by the ComponentModel.
         //so the call may be viewModel().deleteList();
         viewModel(context).deleteList();
    };
};

---

需要注意的另一点是，您没有在

函数ComponentModel（context）{…}

中使用上下文，而是在查看viewModel的代码时返回函数

ComponentModel

，而从未调用过该方法（如果requirejs为您这样做，我记不得了）。因此，我猜测

ojprogresslist.js

应该看起来像

function progressItemViewModel(context) {
  var self = this;
    this.deleteItem=function(event){
         //not sure if the context that is passed in to the parent function  is what is expected by the ComponentModel.
         //so the call may be viewModel().deleteList();
         viewModel(context).deleteList();
    };
};

---

另一件需要注意的事情是，您没有在

函数组件模型（context）{…}

中使用上下文。我试图改进代码格式，并突出显示了一些关键短语。我试图改进代码格式，并突出显示了一些关键短语。