Question

我有一个简单的页面，其中显示了书籍列表以及有关书籍，标题，价格，描述的一些详细信息。数据从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>

Answer 1

聆听视图中的事件。 Source.

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

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
    }
});

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

修改：详细信息
我个人从不为集合创建视图。我更喜欢在另一个模型中包装集合（例如，因为你有一个书籍列表，一个书架......）。但这只是在视图列表的顶部需要一个唯一元素。

为了说明，假设您按类型订购了书籍。你想要一个包装视图来显示标题（告诉用户类型）。所以你可以为你的收藏品使用包装模型现在，您只想将所有图书显示为一个。您只能添加与书籍一样多的视图，在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
  });

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

Backbone：获取被点击的项目的数据

1 个答案: