单击元素时,一个模态呈现不同的模板

Question

我有不同的按钮(一个用于创建'sprint',另一个用于创建注释等).执行这些任务的表单将附加到单击不同按钮时显示的模式对话框.

这些是流量:

点击"Sprint"按钮>追加"Sprint"表格>显示模态

那么如果你点击其他按钮:

点击"评论"按钮>空模态内容>追加"评论"表格>显示模态

目前,不同的内容以字符串形式保存,并在单击按钮时附加到模式.

但现在我正在使用Backbone和Underscore模板,我无法弄清楚如何做同样的事情.我不想在模态中包含所有模板,并根据您单击的按钮显示它们; 我想在点击时追加已经缓存的模板.

有没有办法用Backbone和Underscore做到这一点？

Answer 1

Shvetusya 有一般的想法，但这里有一个具体的例子，希望会更清楚：

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); 
}