backbone 학습 노트:보기(View)
3857 단어 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()
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Backbone(2) 뷰1. 보기 2. 렌더링 뷰//새 HTML을 사용하여 el을 업데이트합니다. 3. 이벤트 의뢰//이벤트를 엘에 추가하는 간단하고 빠른 방법 4. 바인딩 및 컨텍스트...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.