Backbone Study notes: Views (view)

The Backbone View object is primarily used to render data and listen for events.

the backbone View object can display model data, or the user-edited model data can be passed to the background, by listening to the DOM elements in the event operation view

Example:

varpreviewinvoiceitemview=Backbone.View.extend ({el:' #itemList ', Template: _.template ($ (' #InvoiceItem '). HTML ()), Initialize:function(){     This. Template= _.template ($ (' #InvoiceItem '). HTML ()); }, events:{' click. Delete ': ' Dele ', ' click. Pluc ': ' Show '}, Render:function(){        varthat= This; Items.each (function(model) {varData={}; Data.price=model.get (' Price '); Data.quantity=model.get (' Quantity '); Data.amount=Model.calculateamount (); Data.cid=Model.cid;        That. $el. Append (that.template (data));        }); return  This; }, Dele:function(event) {Items.remove (Items.get ($ (event.target). attr (' CID '))); }, Show:function(){       //var s= items.some (function model) {       //return Model.get (' price ') <3;       // });       //this.$ (' #pluc '). HTML (s.tostring ());        varTi=items.create ({price:100,quantity:200}); }});

Extend "layout" block ' content ',-> div---   ' Nihao '   div ID: ' itemList ',->         div ID: ' Pluc ',->   Script ID: "Invoiceitem", type: "Text/template", Style: "Display:none",->     div style: ' border:1px solid #ddd; height:40px; ',->        div style: ' float:left; ',-> ' {{price}} '        div style: ' float:left;margin-left:20px; ',- > ' {{quantity}} '        div style: ' float:left;margin-left:20px; ',-> ' {{amount}} '        button class: ' Delete ', Style: ' float:left;margin-left:20px; ', cid: ' {{cid}} ',-> ' delete '   coffeescript,        New Previewinvoiceitemview (). Render ()

　　

Backbone Study notes: Views (view)