1

我对主干.js 很陌生，并且正在关注本教程，以获得单击元素Site的模型的正确方法。但是，当我单击一个元素时，会触发所有 div 的警报。我知道该事件必须附加到所有 div，并且由单击 div 触发，如果我将 ID 附加到每个 div，我可以解决这个问题，但是根据教程，这不是正确的方法它。这是教程链接的 JSFiddle

和我的代码（script.js）

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

    });

和 html (index.html)

<!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>
4

1 回答 1

1

使这项工作正常需要<div>每个视图只有一个。在您的示例中，特定 itemm 的事件处理程序应在 中注册ItemView，而不是CartView.

于 2012-06-12T15:51:50.287 回答