如何引用被淘汰组件改变的元素

How to reference an element that is altered by knockout component?

本文关键字：组件 淘汰 改变 元素 何引用 引用      更新时间：2023-09-26

我正在尝试构建一个可重用的Knockout.js upload组件，该组件由一个Dropzone.js实例化在表单元素上组成。

改性敲除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>

Page require.js script:

    require(['common'], function() {
        require(['knockout'], function(ko) {
            ko.components.register('upload', {require: 'components/upload/upload'});
        });
    });

可以看到，当我在DOM中创建upload组件时，我传递了一个ID和一个action HTML属性，这样我就可以自定义每个上传组件的命名(因为它们应该是可重用的，对吧?)

然而，当我创建一个新的Dropzone时，我在Upload组件脚本中遇到了一个问题:

    var myDropzone = new Dropzone('#' +  self.dropzoneId(), { url: self.postLocation() });

问题是，尽管作为params传递了我想要ID属性的名称，在调用此函数时，主页上的knockout绑定还没有发生，所以无论我做什么，我传递的任何元素ID都不会被定义，并给我这个错误:

Error: Invalid dropzone element.

因为ID为self.dropzoneId()的元素还不存在，因为绑定还没有应用。

我能做些什么来解决这个问题?

既然我的评论建议起作用了，我就把它作为一个答案写下来。

作为规则，Knockout中的任何DOM操作都应该在绑定中完成。任何需要附加到DOM元素的小部件都应该为它们创建自定义绑定处理程序。这个小部件可以在init部分创建。

相关文章：