javascript - 淘汰视图模型返回未定义
问题描述
我正在开发一个尝试将文件上传到服务器的 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
};
};
这是我的fileCustom.js
:
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 为您执行此操作,我不记得了)。所以我的猜测是progressItemViewModel
in 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();
};
};
另一件需要注意的是,您没有在function ComponentModel(context){...}
.
推荐阅读
- c# - 如果页面未显示在框架中,WPF Visualbrush 不会更新
- java - 无法将 Log4j2 AsyncAppender 与 log4j2.properties 一起使用
- javascript - 根据文件名获取附加的formData文件索引
- powershell - 为什么即使打开 -ErrorAction Stop,我的 try catch 错误也会成功传递?
- python - 如何通过 python 连接以太网连接的相机(Flir AX8 相机)
- python - 如何转换 pandas Dataframe 中列的值?
- html - HTML 创建一个等大小的方形网格图片系统
- ios - Facebook 似乎随机出现在我的项目中
- swiftui - SwiftUI 动画列表行的展开和折叠
- php - 由于 CORS“Access-Control-Allow-Origin”不存在,phpCAS 注销失败