One modal rendering different templates when clicking on a element

Question

I have different buttons (one for creating a 'sprint', another for creating a comment, etc). The forms for doing these tasks are appended to a modal dialog that is displayed when you click on the different buttons.

These are the flows:

click on "Sprint" button > append "Sprint" form > show the modal

then if you click on other button:

click on "Comment" button > empty modal content > append "Comment" form > show the modal

Currently, the different content is saved in a string and it is appended to the modal when you click the button.

But now I'm using Backbone and Underscore templates, and I can't figure out how to do the same thing. I don't want to have all the templates inside the modal and show them depending on the button you clicked; I want to append an already cached template on click.

Is there a way of doing this with Backbone and Underscore?

score 1 · Accepted Answer · answered Oct 31 '12 at 18:28

Shvetusya has the general idea, but here's a specific example which will hopefully 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); 
}

score 0 · Answer 2 · answered Oct 31 '12 at 17:35

I solved similar problem by separating container for the modal into its own view.

Then when "sprint" button is clicked render "sprint" form view and append that view's el to modal then open modal.

Similarly when "comment" button is clicked render "comment" form view and append its el to modal.

That way you can use templates for "sprint" form and "comment" form.

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

Managing A Modal Dialog With Backbone And Marionette

One modal rendering different templates when clicking on a element

2 Answers2