javascript - 如何引用被 knockout 组件更改的元素？

Question

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

AMDified Knockout 上传组件:

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 属性采用的名称，但在调用此函数时，主页上的 knockout 绑定(bind)尚未发生，因此，无论我做什么，我传递的任何元素 ID 都不会被定义，并给出以下错误:

Error: Invalid dropzone element.

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

我可以做些什么来解决这个问题？

Answer 1

既然我的评论建议有效，我就把它写成答案。

通常，Knockout 中的任何 DOM 操作都应该在绑定(bind)中完成。任何需要附加到 DOM 元素的小部件都应该为其创建自定义的 bindingHandler。可以在 init 部分创建小部件。