Backbone.js單擊所有div的一個div觸發器事件

Im對backbone.js來說，這是一個相當新的內容，並且正在按照本教程獲取單擊元素Site的模型的正確方法。但是，當我點擊一個元素，警報觸發所有的div。我知道該事件必須附加到所有div，並通過點擊div觸發，如果我將ID附加到每個div，我可以解決此問題，但根據教程，這不是正確的方法它。這是對的jsfiddle教程Link Backbone.js單擊所有div的一個div觸發器事件

和我的代碼（的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>

來源

2012-06-12 mcclennon19

使這項工作正確的要求，只有一個<div>每個視圖。在您的示例中，特定itewm的事件處理程序應該在ItemView中註冊，而不是CartView。

來源

2012-06-12 15:51:50

Backbone.js單擊所有div的一個div觸發器事件

回答

相關問題