javascript - 单击元素时一种模式呈现不同的模板

Question

我有不同的按钮(一个用于创建“冲刺”，另一个用于创建评论，等等)。执行这些任务的表单附加到一个模式对话框中，当您单击不同的按钮时会显示该对话框。

这些是流程:

点击“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); 
}