6

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

フローは次のとおりです。

「スプリント」ボタンをクリック > 「スプリント」フォームを追加 > モーダルを表示

次に、他のボタンをクリックすると：

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

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

しかし、今は 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 がモーダルに追加されます。

そうすれば、「スプリント」フォームと「コメント」フォームのテンプレートを使用できます。

こちらの投稿もチェックしてください（現在のセットアップに使用しました）：

Backbone と Marionette を使用したモーダル ダイアログの管理

于 2012-10-31T17:35:16.120 に答える