Backbone.js单击所有div的一个div触发器事件'；s_Backbone.js

Backbone.js单击所有div的一个div触发器事件'；s

backbone.js

Backbone.js单击所有div的一个div触发器事件'；s,backbone.js,Backbone.js,我对backbone.js很陌生，并且一直在学习本教程，了解如何正确获取单击元素的模型。但是，当我单击一个元素时，所有div都会触发警报。我知道事件必须附加到所有div，并由单击div触发，如果我将ID附加到每个div，我可以绕过这个问题，但是根据教程，这不是正确的方法。这是本教程的JSFIDLE 和我的代码（script.js）和html（index.html）购物车 “alt=”“> &磅；要正确执行此操作，每个视图只需要一个。在您的示例中，特定itewm的事件处理程序应该在项目视图

我对backbone.js很陌生，并且一直在学习本教程，了解如何正确获取单击元素的模型。但是，当我单击一个元素时，所有div都会触发警报。我知道事件必须附加到所有div，并由单击div触发，如果我将ID附加到每个div，我可以绕过这个问题，但是根据教程，这不是正确的方法。这是本教程的JSFIDLE

和我的代码（script.js）

和html（index.html）


购物车
“alt=”“>
&磅；

要正确执行此操作，每个视图只需要一个

。在您的示例中，特定itewm的事件处理程序应该在

项目视图中注册，而不是CartView
要正确执行此操作，每个视图只需要一个
。在您的示例中，特定itewm的事件处理程序应该是在ItemView
中注册，而不是cartwiew

    var Item = Backbone.Model.extend
    ({
        defaults:
        {
            price:35,
            photo: "images/flower1.jpg"
        }
    });

    var Cart = Backbone.Collection.extend
    ({
        model: Item
    });

    var items = [
      { id: 1, title: "Macbook Air", price: 799 },
      { id: 2, title: "Macbook Pro", price: 999 },
      { id: 3, title: "The new iPad", price: 399 },
      { id: 4, title: "Magic Mouse", price: 50 },
      { id: 5, title: "Cinema Display", price: 799 }
    ];

    var cartCollection = new Cart(items);

    var ItemView = Backbone.View.extend
    ({
        tagName: "div",
        className: 'item-wrap',
        template: $("#itemTemplate").html(),

        render: function()
        {
            var templ = _.template(this.template);
            $(this.el).html(templ(this.model.toJSON()));
            return this;
        }

    })

    var CartCollectionView = Backbone.View.extend
    ({
        el: $("#yourcart"),

        initialize: function()
        {
            this.collection = cartCollection;
            this.collection.bind('onclick', function(item)
            {
                alert('Item has been clicked');
            });
            this.render();
        },

        events:
        {
            "click div": "clicked"
        },

        clicked: function(e)
        {
            e.preventDefault();
            var id = $(e.currentTarget).data("id");
            console.log(id);
            var item = this.collection.get(id);
            console.log(item);
            var title = item.get("title");
            console.info("Showing title "+title);
            //alert(title);
        },

        render: function()
        {
            this.collection.each(function(item)
            {
                this.renderItem(item);
            }, this);
        },

        renderItem: function(item)
        {
            var itemView = new ItemView({ model:item});
            $(this.el).append(itemView.render().el);
        }
    });




    $(document).ready(function() {
    console.info('Doc ready');
        var cart = new CartCollectionView();

    });

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
           Shopping Cart
        </title>
        <link rel="stylesheet" href="lib/style.css" type="text/css">
    </head>
    <body>
    <span id="yourcart"></span>
    <script id="itemTemplate" type="text/template">
    <img src="<%= photo %>" alt="<%= title %>">
    <div id="test" data-id="<%= id %>">
      <h2><%= title %></h2>
      <h4>&pound;<%= price %></h4>
    </div>
</script>
        <script src="lib/jquery.js" type="text/javascript"></script>
        <script src="lib/underscore.js" type="text/javascript"></script>
        <script src="lib/backbone.js" type="text/javascript"></script>
        <script src="lib/script.js" type="text/javascript"></script>
    </body>
</html>