backbone 학습 노트:보기(View)

Backbone 뷰 객체는 주로 데이터를 렌더링하고 이벤트를 수신하는 데 사용됩니다.
Backbone의 보기 대상은 모델 데이터를 보여줄 수도 있고 사용자가 편집한 모델 데이터를 백엔드에 전달할 수도 있으며 이벤트 조작 보기의 DOM 요소를 감청할 수 있다
예:

var PreviewInvoiceItemView=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(){
        var that=this;
        items.each(function(model){
            var data={};
            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());

        var ti=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}}',->" "
   coffeescript ->
     
     $ ->

        new PreviewInvoiceItemView().render()