ControllerTodoItemappmodel_refguigui_idtodoTemplatenotify_funcconstructor()bind_events()toggle()editingMode()editKeyup()update()destroy()_delete_gui()_insert_gui()build()apply_filter()notify()The modified and deleted events will come from todo model item, whereas thefilter changedevent will come from the footer controller.LISTEN <<modified_todoitemLISTEN <<deleted_todoitemLISTEN <<filter_changeddocument.addEventListener("modified todoitem", this.notify_func)document.addEventListener("deleted todoitem", this.notify_func)document.addEventListener("filter changed", this.notify_func)defconstructor()delete the GUI element and unwire any listeners to this controllerUNLISTEN <<Xmodified_todoitemUNLISTEN <<Xdeleted_todoitemUNLISTEN <<Xfilter_changeddocument.removeEventListener("modified todoitem", this.notify_func, false)document.removeEventListener("deleted todoitem", this.notify_func, false)document.removeEventListener("filter changed", this.notify_func, false)def_delete_gui()Listened for events end up here. <<Checks for event.type and performs what is required.Note: this method is not called as a result of the gui events, but as aresult of listening to internal eventsif (event.type == "modified todoitem" ... //modified_todoitemelse if (event.type == "deleted todoitem" ... //deleted_todoitemelse if (event.type == "filter_changed") ... //filter_changeddefnotify(event)ControllerHeaderappguiconstructor()on_keyup()toggleAll()ControllerFooterappguifooterTemplatefilterconstructor()destroyCompleted()filter_click()filter()filter()renderFooter()notify()LISTEN <<app_model_changedLISTEN <<modified_todoitemdocument.addEventListener("app model changed", (event) => { this.notify(event) })document.addEventListener("modified todoitem", (event) => { this.notify(event) })defconstructor()this broadcast goes to all the todoitem controllersBROADCAST >>filter_changednotify_all("filter changed", this, {'filter': this.filter});deffilter_click(e)Renders the footer area, incl. count of number of todo items yet to complete.defnotify(event)ControllerDebugDumpModelsappguiconstructor()format()log()display_debug_info()notify()«module»controllers_jsutilENTER_KEYESCAPE_KEYTodoItem_title_completedidconstructor()title()title()completed()completed()as_dict()delete()dirty()BROADCAST >>deleted_todoitemnotify_all("deleted todoitem", this)defdelete()Called when modify any of the todo item's attributese.g. 'completed' or 'title'BROADCAST >>modified_todoitemnotify_all("modified todoitem", this, {during_load: false})defdirty()«module»model_js«module»observer_events_jsnotify_all()Appconstructor()add()delete()---Event wiring - listening for these events ocurring in the systemupon receiving this event, (event) => { this.delete(event.detail.from) })LISTEN <<deleted_todoitemdocument.addEventListener("deleted todoitem",defconstructor()will tell e.g. footer controller to update displayed countBROADCAST >>app_model_changednotify_all("app model changed", this)defadd()called as a result of listening to thedeleted_todoitemeventwill now tell e.g. footer controller to update displayed countBROADCAST >>app_model_changednotify_all("app model changed", this)defdelete()all todo item controllers listen for and will receive thismodified_todoitemno listeners except root debug listener, displaying the model debug view ("app model changed")BROADCAST >>modified_todoitemBROADCAST >>app_model_changednotify_all("modified todoitem", this, options)notify_all("app model changed", this)defLoad()«event»deleted_todoitem«event»app_model_changed«event»modified_todoitem«event»filter_changedcontainscontainscontainscontainscontainsAppsends *app_model_changedeventduring add, deleteAppsends *modified_todoitemduring loadControllerFootersends *filter_changedwhen users clicksTodoItemsends *modified_todoitemTodoItemsends *deleted_todoitemGenerated by GitUml www.gituml.com