Posted By: user2787959
I want a Bootstrap modal (underscore template:
dialog-template) to show when clicking
#add-button (create new task) or
.list-group-item-heading (edit existing task), but the modal won’t appear, even though the modal html is appended to the body.
My attempt is here: jsfiddle.
(As my REST API is not available to the jsfiddle, the task list is empty, I don’t know if there’s any way to fix this with jsfiddle?)
From looking at your Fiddle and fixing its dependency issues, there are a couple problems:
- Your Add button has no idea what modal its attribute is referring to, since the modal exists as a Backbone View with a template, and is not in the DOM.
- Your Add modal has no model to render with, and
this.$el.modal()is never called.
To fix this, your button must have a click handler for initializing and rendering a modal, and your modal must create a new Task if it doesn’t already have one. Then it just needs to call the Bootstrap
modal function. I’ve updated your Fiddle to reflect this.
All I did was fix the problems above. I’m leaving it up to you to figure out the communication between the modal’s model getting into the Task Collection upon a save.