1つの要素をクリックすると、1つのモーダルで異なるテンプレートがレンダリングされます

Question

異なるボタン（「スプリント」を作成するためのもの、コメントを作成するためのものなど）があります。これらのタスクを実行するためのフォームは、異なるボタンをクリックすると表示されるモーダルダイアログに追加されます。

これらは、流れている：「スプリント」フォームを追加>

クリック「スプリント」ボタンを>あなたは他のボタンをクリックした場合、その後、モーダル

を示しています。

は上をクリック"コメント"ボタン>空のモーダルコンテンツ> "コメント"フォームを追加>モーダルを表示

現在、さまざまなコンテンツが文字列で保存されていますボタンをクリックするとモーダルに追加されます。

私は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

私はモーダルのためのコンテナをそれ自身のビューに分離することで同様の問題を解決しました。

"スプリント"ボタンをクリックすると、 "スプリント"フォームビューがレンダリングされ、そのビューのelがモーダルに追加され、モーダルが開きます。

同様に「コメント」ボタンをクリックすると、「コメント」フォームビューをレンダリングし、そのエルをモーダルに追加します。

「スプリント」フォームと「コメント」フォームにテンプレートを使用できます。また、ここで

チェックアウトこの記事を（私は私の現在の設定のためにそれを使用）：

Managing A Modal Dialog With Backbone And Marionette