बैकबोन टेबल व्यूइंग पंक्ति दृश्य - संरचना कैसे करें?

Question

मैं मॉडल है कि मैं एक तालिका दृश्य में प्रस्तुत करने के लिए इच्छा के एक संग्रह है। प्रत्येक मॉडल को तालिका में एक पंक्ति द्वारा दर्शाया जाना चाहिए, और यह पंक्ति टेम्पलेट का उपयोग करके उत्पन्न की जानी चाहिए। मैं उस पंक्ति को ईवेंट हैंडलर्स संलग्न करने के लिए सक्षम होना चाहिए (उदाहरण के लिए क्लिक करें), कि घटना पर कुछ विशिष्ट मॉडल है कि पंक्ति से संबद्ध के बारे में जानकारी की सूचना दें।

एक सामान्य तरीका मैंने ऐसा करने के लिए समान चीजों को देखा है, प्रत्येक पंक्ति को अपने स्वयं के दृश्य में तोड़ना है, और माता-पिता के दृश्य (इस मामले में तालिका कहें) को HTML दृश्य उत्पन्न करने के लिए पंक्ति दृश्य का उपयोग करें अपने कोड में शामिल करें। हालांकि मैं यह नहीं समझ सकता कि यह टेम्पलेट्स के साथ कैसे काम करता है।

इस मामले में, मैं विशेष रूप से रोव्यूव में ईवेंट संलग्न नहीं कर सकता क्योंकि इसमें किसी डोम तत्व (this.el रीढ़ की हड्डी के लिए) का कोई संदर्भ नहीं है, यह बस एक स्ट्रिंग देता है। अधिकतम क्षमता के लिए टेम्पलेट का उपयोग करते समय, मैं जो चाहता हूं उसे कैसे प्राप्त कर सकता हूं?

सवाल घटनाओं, templating या नेस्टेड विचारों का उपयोग के बारे में विशेष रूप से नहीं है, लेकिन सही तरीके से उत्पादन के इस प्रकार प्राप्त करने के लिए रीढ़ का उपयोग करने के बारे में और अधिक।

नमूना कोड (जिसे fiddle में):

/** 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(); 

धन्यवाद!

Answer 1

एक तरह से विचारों का एक पदानुक्रम को संभालने के लिए प्रत्येक दृश्य के अपने बच्चों प्रस्तुत करना और उन्हें अपने el को संलग्न है। उसके मॉडल/संग्रह के अनुसार, घटनाओं को प्रत्येक दृश्य द्वारा संभाला जाता है।

दृश्य el के रूप में अपने HTML इंजेक्षन करने के लिए और इस तरह कंटेनर तत्व पर नियंत्रण, आप आप एक रीढ़ दृश्य लागू करना चाहते हैं तो setElement विधि

setElementview.setElement(element)

उपयोग कर सकते हैं एक अलग DOM एलीमेंट का, setElement का उपयोग, जो भी कैश्ड $ एल संदर्भ पैदा करेगा और पुराने तत्व से नया करने के लिए ले जाने के देखने के प्रत्यायोजित घटनाओं।

आपका उदाहरण के रूप में

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); 

और एक फिडल http://jsfiddle.net/9avm6/5/