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

2

收听您视图中的事件。资源。

所以基本上你会在你的视图中有这样的东西：

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;
    },
    events: {
      'click': 'openModal'
      // you could also use 'click selector', see the doc
    },
    openModal: function() {
      // here the context is your view
      // so this.model will give you your collection, hence access to your data
    }
});

但是，我个人认为您应该有多个视图，每个视图用于一个模型（=book），而不是集合的整个视图。但是，嘿，这只是一个意见。

编辑：详细信息
我个人从不为集合创建视图。我更喜欢用另一种模型包装收藏（例如，当你有一个书籍清单、一个书架......）。但这只是在您需要视图列表顶部的唯一元素时。

举例来说，假设您按类型订购书籍。您需要一个包装视图来显示标题（告诉用户流派）。因此，您可以为您的收藏使用包装模型。
现在您只想将所有书籍显示为一本书。您只能在某些 div 或 ul 元素中添加与书籍一样多的视图。因此，您不需要包装您的收藏。

我可以一直谈论我在哪里、何时以及如何创建我的观点，但这不是重点，我也没有资格这样做（没有受过任何计算机科学教育，所以你可能会质疑我所说的一切，我不会怨恨你）。所以基本上，您可以将代码更改为：

initialize: function(){
  var bookList = new BookList; // I'm removing the parenthesis here
  // I simply like to separate "new Booklist" which makes a new object
  // from "Booklist()" which just calls the function
  bookList.each(function(book) {
    new BookView({model: book});
    // here you may not need "book" and use "this" instead, not sure though
  });

然后是绑定的问题。同样，我会让您搜索您的解决方案，但它可以像在视图的初始化函数中进行绑定一样简单。有很多可能性。

于 2013-04-09T12:46:27.850 回答