1

クリックされた要素Siteのモデルを取得する正しい方法については、backbone.jsを初めて使用し、このチュートリアルに従っていました。ただし、1つの要素をクリックすると、すべてのdivに対してアラートがトリガーされます。イベントはすべてのdivに添付する必要があり、divのクリックによってトリガーされることを理解しています。各divにIDを添付すればこれを回避できますが、チュートリアルによると、これは正しい方法ではありません。それ。これはチュートリアルリンクの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>ビューごとに1つだけが必要です。あなたの例では、特定のitewmのイベントハンドラーはItemView、ではなく、に登録する必要がありCartViewます。

于 2012-06-12T15:51:50.287 に答える