Проблема события Javascript

Question

У меня сейчас проблема с событиями в JavaScript. Сначала я попытаюсь объяснить, чего я пытаюсь достичь.

Я хочу нарисовать холст на основе содержимого файла, извлеченного в элементе <input type="file" />. Я пытался сделать дизайн на основе ООП для этого.

Я хочу создать виджет, который может это делать.

Итак, во-первых, я создал свой класс виджетов:

Dicom5.Rendering.Viewer = function(){
    var viewer = document.createElement('div','dicom5-rendering-viewer');

    var fileOpener = new Dicom5.Rendering.FileOpener();
    var canvas = new Dicom5.Rendering.Canvas();


    viewer.appendChild(fileOpener.render());
    viewer.appendChild(canvas.render());

    this.render = function(){
        return viewer;
    }
};

У меня также есть следующие два класса FileOpener и Canvas

Dicom5.Rendering.Canvas = function(){

    var canvas;
    canvas = document.createElement('canvas');

    this.render = function(){
        return canvas;
    }
};

и файл Opener

Dicom5.Rendering.FileOpener = function(){


    var fileOpener = document.createElement('input');
    fileOpener.setAttribute('id','dicom5-rendering-fileopener');
    fileOpener.setAttribute('type','file');

    fileOpener.onchange = function(){
       **HERE !! I want to change my canvas object**
    }


    this.render = function(){
        return fileOpener;
    }

};

Итак, как вы можете видеть, у меня есть 1 объект, который имеет Canvas объект и FileOpener объект. Я хочу изменить созданный экземпляр объекта Canvas с созданным объектом FileOpener. Каков был бы лучший способ сделать это?

Answer 1

Лучше всего, чтобы они оставались несвязанными, а Viewer склеивали их вместе.Возможно, FileOpener может обеспечить обратный вызов (например, событие), когда ему нужно обновить Canvas, а Viewer может передать обработчик для этого обратного вызова и выполнить реальную работу.Я сказал «обратный вызов», но это может быть скорее событие или модель Observer, поэтому один FileOpener может иметь несколько обработчиков для события, которое необходимо обновить Canvas.