書籍のリストと、書籍、タイトル、価格、説明に関するいくつかの詳細を表示する簡単なページがあります。データは JSON ファイルから取得されます。
リストされている本のいずれかをクリックすると、クリックされた本のタイトルを表示したい場所にライトボックス (ブートストラップモーダル) が起動します。ユーザーはコメントを書くことができるので、ブック ID も取得して送信したいと思います。
クリックされた書籍からデータを取得する最善の方法がわからない場合は、
これまでのコードは次のとおりです(ライトボックスを含む):
背骨:
var Book = Backbone.Model.extend();
var BookList = Backbone.Collection.extend({
model: Book,
url: 'json/books.json'
});
var BookView = Backbone.View.extend({
el: '.booksList',
template: _.template($('#booksTemplate').html()),
render: function(){
_.each(this.model.models, function(model){
this.$el.append(this.template({
data: model.toJSON()
}));
}, this);
return this;
}
});
var AppView = Backbone.View.extend({
el: 'body',
initialize: function(){
var bookList = new BookList();
var bookView = new BookView({
model: bookList
});
bookList.bind('reset', function(){
bookView.render();
});
bookList.fetch();
}
});
var appView = new AppView();
テンプレート:
<script id="booksTemplate" type="text/template">
<div class="book">
<div class="bookDetails">
<h3><%= data.title %></h3>
<p><%= data.price %></p>
</div>
<p><%= data.description %></p>
<a href="#myModal" data-toggle="modal">bid</a>
</div>
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><%= data.title %></h3>
</div>
<div class="modal-body">
<form action="#" method="post">
<input type="text" name="comment" id="comment" />
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn close" data-dismiss="modal" aria-hidden="true">Close</a>
</div>
</div>
</script>