One modal rendering of various templates when clicking on an element

Question

I have different buttons (one for creating a sprint, another for creating a comment, etc.). Forms for performing these tasks are added to the modal dialog that appears when you click on various buttons.

These are the threads:

press the Sprint button> add a Sprint form> show modal

then if you click on another button:

click the Comment button> empty modal content> add a Comment form> show modal

Currently, various content is stored in the line and added to the modal when the button is clicked.

But now I am using Backbone and Underscore templates, and I cannot figure out how to do the same. I don’t want to have all the templates inside the modal and show them depending on the button you clicked; I want to add an already cached template when clicked.

Is there a way to do this with Backbone and Underscore?

Answer 1

Shvetyus has a general idea, but here is a concrete example, which we hope will be clearer:

var Modal = Backbone.View.extend({ render: function() { this.$el.append(this.options.form.render().$el); } }); var SprintForm = Backbone.View.extend({ render: function() { // Use your templating engine to make a "sprint" form // eg. this.$el.html(sprintTemplate()); } }); var CommentForm = Backbone.View.extend({ render: function() { // Use your templating engine to make a "comment" form // eg. this.$el.html(commentTemplate()); } }); // handler for: click on "Sprint" button > handleSprintButtonClick: function() { var sprintForm = new SprintForm(); var modal = new Modal({form: sprintForm}); $(document.body).append(modal.render().$el); } // handler for: click on "Comment" button > handleCommentButtonClick: function() { var commentForm = new CommentForm(); var modal = new Modal({form: commentForm}); $(document.body).append(modal.render().$el); } 

Answer 2

I solved a similar problem by dividing the container into a modal one on my own look.

Then, when the sprint button is pressed, visualize the sprint shape and add this el view to the modal, then open the modal.

Similarly, when the comment button is clicked, visualize the presentation of the comment form and add it to the module.

This way you can use sprint and comment form templates.

Checkout this post here (I used it for my current setup):

Management of a modal dialogue with a poppy and a puppet