2

書籍のリストと、書籍、タイトル、価格、説明に関するいくつかの詳細を表示する簡単なページがあります。データは 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">&times;</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>
4

1 に答える 1