Question

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

这些是流程：

点击“Sprint”按钮＆gt;附加“Sprint”表格＆gt;显示模态

然后如果你点击其他按钮：

点击“评论”按钮＆gt;空模态内容＆gt;附加“评论”表格＆gt;显示模态

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

但现在我正在使用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); 
}

Answer 2

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

然后当点击“sprint”按钮渲染“sprint”表格视图并将该视图的el附加到模态然后打开模态。

同样，当点击“评论”按钮时，渲染“评论”表单视图并将其附加到模态。

通过这种方式，您可以将模板用于“sprint”表单和“注释”表单。

也可以在此处查看此帖子（我将其用于当前设置）：

Managing A Modal Dialog With Backbone And Marionette

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

2 个答案: