单击元素时呈现不同模板的一种模式答案

【问题标题】：One modal rendering different templates when clicking on a element单击元素时呈现不同模板的一种模式
【发布时间】：2012-10-31 17:18:26
【问题描述】：

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

这些是流程：

点击“Sprint”按钮 > 附加“Sprint”表单 > 显示模态

如果你点击其他按钮：

点击“评论”按钮 > 清空模态内容 > 附加“评论”表单 > 显示模态

目前，不同的内容保存在一个字符串中，并在您单击按钮时附加到模式中。

但现在我正在使用 Backbone 和 Underscore 模板，我不知道如何做同样的事情。我不想将所有模板都包含在模式中并根据您单击的按钮显示它们；我想在点击时附加一个已经缓存的模板。

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

【问题讨论】：

标签： javascript backbone.js underscore.js backbone-views

【解决方案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); 
}

【讨论】：

【解决方案2】：

我通过将模态容器分离到它自己的视图中解决了类似的问题。

然后，当单击“冲刺”按钮时，渲染“冲刺”表单视图并将该视图的 el 附加到模态，然后打开模态。

类似地，当单击“评论”按钮时，会渲染“评论”表单视图并将其 el 附加到模态。

这样您就可以将模板用于“sprint”表单和“comment”表单。

也在这里查看这篇文章（我将它用于我当前的设置）：

Managing A Modal Dialog With Backbone And Marionette

【讨论】：