如何引用被淘汰组件更改的元素?
How to reference an element that is altered by knockout component?
我正在尝试构建一个可重复使用的 Knockout.js upload
组件,该组件由表单元素上的 Dropzone.js 实例化组成。
AMD 化淘汰赛 Upload
组件:
define(['knockout', 'dropzone', 'jquery', 'text!components/upload/upload.html'], function(ko, Dropzone, $, htmlString) {
function UploadViewModel(params) {
var self = this;
self.dropzoneId = ko.observable(params.dropzoneId);
self.postLocation = ko.observable(params.postLocation);
Dropzone.options.uploadedFilesDropzone = {
// Dropzone options here
};
}
var myDropzone = new Dropzone('#' + self.dropzoneId(), { url: self.postLocation() });
return { viewModel: UploadViewModel, template: htmlString };
});
正在使用的模板:
<form method="post" class="dropzone" enctype="multipart/form-data" data-bind="attr: { action: postLocation, id : dropzoneId }">
</form>
<button id="upload">Upload</button>
当我在页面中创建它时:
<upload params="dropzoneId: 'uploadFilesDropzone', postLocation: 'missioncontrol/create/upload'"></upload>
页require.js脚本:
require(['common'], function() {
require(['knockout'], function(ko) {
ko.components.register('upload', {require: 'components/upload/upload'});
});
});
如您所见,当我在 DOM 中创建我的 upload
组件时,我传递了一个 ID 和一个操作 HTML 属性,因此我可以自定义命名这些上传组件中的每一个(因为它们应该是可重用的,对吧?)。
但是,当我创建一个新的 Dropzone
:
时,我 运行 在我的 Upload
组件脚本中遇到了问题
var myDropzone = new Dropzone('#' + self.dropzoneId(), { url: self.postLocation() });
问题是,尽管通过 params
我希望 ID 属性采用的名称,但在调用此函数时,主页上的敲除绑定尚未发生,因此无论我做什么,我通过的任何元素 ID 都不会被定义并给我这个错误:
Error: Invalid dropzone element.
因为 ID 为 self.dropzoneId()
的元素尚不存在,因为尚未应用绑定。
我该怎么做才能解决这个问题?
既然我的评论建议奏效了,我就把它写下来作为答案。
通常,Knockout 中的任何 DOM 操作都应在绑定中完成。任何需要附加到 DOM 元素的小部件都应该为它们创建自定义绑定处理程序。可以在 init
部分创建小部件。
我正在尝试构建一个可重复使用的 Knockout.js upload
组件,该组件由表单元素上的 Dropzone.js 实例化组成。
AMD 化淘汰赛 Upload
组件:
define(['knockout', 'dropzone', 'jquery', 'text!components/upload/upload.html'], function(ko, Dropzone, $, htmlString) {
function UploadViewModel(params) {
var self = this;
self.dropzoneId = ko.observable(params.dropzoneId);
self.postLocation = ko.observable(params.postLocation);
Dropzone.options.uploadedFilesDropzone = {
// Dropzone options here
};
}
var myDropzone = new Dropzone('#' + self.dropzoneId(), { url: self.postLocation() });
return { viewModel: UploadViewModel, template: htmlString };
});
正在使用的模板:
<form method="post" class="dropzone" enctype="multipart/form-data" data-bind="attr: { action: postLocation, id : dropzoneId }">
</form>
<button id="upload">Upload</button>
当我在页面中创建它时:
<upload params="dropzoneId: 'uploadFilesDropzone', postLocation: 'missioncontrol/create/upload'"></upload>
页require.js脚本:
require(['common'], function() {
require(['knockout'], function(ko) {
ko.components.register('upload', {require: 'components/upload/upload'});
});
});
如您所见,当我在 DOM 中创建我的 upload
组件时,我传递了一个 ID 和一个操作 HTML 属性,因此我可以自定义命名这些上传组件中的每一个(因为它们应该是可重用的,对吧?)。
但是,当我创建一个新的 Dropzone
:
Upload
组件脚本中遇到了问题
var myDropzone = new Dropzone('#' + self.dropzoneId(), { url: self.postLocation() });
问题是,尽管通过 params
我希望 ID 属性采用的名称,但在调用此函数时,主页上的敲除绑定尚未发生,因此无论我做什么,我通过的任何元素 ID 都不会被定义并给我这个错误:
Error: Invalid dropzone element.
因为 ID 为 self.dropzoneId()
的元素尚不存在,因为尚未应用绑定。
我该怎么做才能解决这个问题?
既然我的评论建议奏效了,我就把它写下来作为答案。
通常,Knockout 中的任何 DOM 操作都应在绑定中完成。任何需要附加到 DOM 元素的小部件都应该为它们创建自定义绑定处理程序。可以在 init
部分创建小部件。