6

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

这些是流程：

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

然后，如果您单击其他按钮：

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

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

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

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

4

2 回答 2

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); 
}
于 2012-10-31T18:28:02.453 回答
0

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

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

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

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

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

使用 Backbone 和 Marionette 管理模态对话框

于 2012-10-31T17:35:16.120 回答