Omurga tablosu görünümünde satır görünümü görünümü - nasıl yapılandırılır?

Question

Tablo görünümünde oluşturmak istediğim bir model koleksiyonum var. Her model, tabloda tek bir satır ile temsil edilmeli ve bu satır bir şablon kullanılarak oluşturulmalıdır. Olay işleyicisine, o satıra ilişkin modelle ilgili bazı özel bilgileri içeren olay bildirimine ekleyebilmem gerekir.

Bunu yapmak için benzer şeyler gördüğüm yaygın bir yol, her sırayı kendi görünümüne ayırmak ve bir ana görünümüne sahip olmaktır (bu durumda, bu durumda tablonun), html'yi oluşturmak için satır görünümünü kullanır. kodunuza ekleyin. Ancak bunun şablonlarla nasıl çalıştığını anlayamıyorum.

Bu durumda, bir dom öğesine (omurga için this.el) hiçbir başvuruda bulunmadığından özel olarak RowView'a olay ekleyemiyorum, yalnızca bir dize döndürür. Bir şablonu maksimum kapasitede kullanırken istediğimi nasıl sağlayabilirim?

soru olaylar, çiftleşmiş veya iç içe görünümleri kullanma konusunda özel olarak değil, ama çıkış bu tür ulaşmak için Omurga kullanmak için doğru yolu hakkında daha fazla. (Aynı zamanda fiddle olarak)

örnek kod:

/** View representing a table */ 
var TableView = Backbone.View.extend({ 
    tagName: 'table', 
    render: function() { 
     var rows = _.map(this.collection.models, function(p) { 
      return new RowView({model: p}).render();       
     }); 
     $('body').html(this.$el.html(rows.join(''))); 
    } 
}); 

/** View representing a row of that table */ 
var RowView = Backbone.View.extend({ 
    render: function() { 
     // imagine this is going through a template, but for now 
     // lets just return straight html. 
     return '<tr>' + 
       '<td>' + this.model.get('name') + '</td>' + 
       '<td>' + this.model.get('age') + '</td>' + 
       '</tr>'; 
    } 
}); 

var data = [ 
    {'name': 'Oli', 'age': 25}, 
    {'name': 'Sarah', 'age': 20}]; 

/** Collection of models to draw */ 
var peopleCollection = new Backbone.Collection(data); 
var tableView = new TableView({collection: peopleCollection}); 
tableView.render(); 

teşekkür ederiz! görüşlerin bir hiyerarşi işlemek için

Answer 1

bir yolu, her görüş kendi çocukları işlemek ve el bunları eklemek sahip olmaktır. Olaylar daha sonra model/koleksiyonuna göre her bir görüş tarafından ele alınır. Eğer bir Omurga görünümü uygulamak isterseniz

görünümü el olarak HTML'nizi enjekte ve böylece konteyner elemanı kontrol etmek için setElement yöntemi

setElementview.setElement(element)

kullanabilirsiniz Farklı bir DOM öğesine, ayrıca önbelleğe alınmış $ el referansını oluşturacak ve görünümün temsil edilen öğesini eski öğeden yenisine taşıyacak setElement öğesini kullanın.

Sizin örnek

var rowTemplate=_.template("<tr>"+ 
    "<td class='name'><%= name %></td>"+ 
    "<td class='age'><%= age %></td>"+ 
    "</tr>"); 

/** View representing a table */ 
var TableView = Backbone.View.extend({ 
    tagName: 'table', 

    initialize : function() { 
     _.bindAll(this,'render','renderOne'); 
    }, 
    render: function() { 
     this.collection.each(this.renderOne); 
     return this; 
    }, 
    renderOne : function(model) { 
     var row=new RowView({model:model}); 
     this.$el.append(row.render().$el); 
     return this; 
    } 
}); 

/** View representing a row of that table */ 
var RowView = Backbone.View.extend({ 
    events: { 
     "click .age": function() {console.log(this.model.get("name"));} 
    }, 

    render: function() { 
     var html=rowTemplate(this.model.toJSON()); 
     this.setElement($(html)); 
     return this; 
    } 
}); 

var data = [ 
    {'name': 'Oli', 'age': 25}, 
    {'name': 'Sarah', 'age': 20}]; 

/** Collection of models to draw */ 
var peopleCollection = new Backbone.Collection(data); 
var tableView = new TableView({collection: peopleCollection}); 
$("body").append(tableView.render().$el); 

Ve Keman http://jsfiddle.net/9avm6/5/