渲染每一行與模板 - 骨幹

Question

繼承人我的代碼：

var RowsSubView = Backbone.View.extend({ 

    initialize: function() { 
    log.debug(this.collection); 
    }, 

    render: function() { 
    var html = RowView(); 
    this.setElement(html); 
    return this; 
    } 

}); 


var View = BaseView.extend({ 

    id: 'wrapper', 

    className: 'container-fluid', 

    events: { 
    }, 

    initialize: function() { 
    _.bindAll(this, 'render'); 
    log.debug('Initialized Queue View'); 
    this.opportunities = new Opportunities(); 

    this.opportunities.on('add', function(model){ 
    }); 

    this.opportunities.fetch({ 
     success: function(response, options) { 
     }, 
     error: function(response) { 
     } 
    }); 
    }, 

    render: function() { 
    var template = QueueView(); 
    this.$el.html(template); 
    this.renderRowsSubView(); 
    return this; 
    }, 


    renderRowsSubView: function() { 
    // render rows 
    this.row = new RowsSubView({collection: this.opportunities}); 
    this.row.render(); 
    this.$el.find('tbody').append(this.row.el); 
    } 

}); 

我的繼承人問題：

對不起，小白的問題！我正在學習Backbone並遇到一些問題。我看了一大堆教程/指南，但我想我已經迷惑了自己。

我想創建一個項目列表，並將它們呈現在表中。我想將每個項目傳遞到我的模板並在視圖中吐出。

將我的收藏傳遞給我的RowsSubView後，我被卡住了。我不確定如何呈現模板中的每個對象。然後插入那些。 PS：我可以在我的RowsSubView中記錄this.collection，並看到一個包含項目數組的對象。

謝謝。

Answer 1

對於那些這可能幫助，繼承人是我結束了：

var RowsSubView = Backbone.View.extend({ 

    initialize: function() { 
    }, 

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

}); 


var View = BaseView.extend({ 

    id: 'wrapper', 

    className: 'container-fluid', 

    events: { 
    }, 

    initialize: function() { 
    _.bindAll(this, 'render', 'add'); 
    log.debug('Initialized Queue View'); 

    this.opportunities = new Opportunities(); 
    this.opportunities.on('add', this.add); 

    this.fetch(); 
    }, 

    add: function(row) { 
    this.row = new RowsSubView({model: row}); 
    this.row.render(); 
    $('tbody').append(this.row.el); 
    }, 

    fetch: function() { 
    this.opportunities.fetch({ 
     data: $.param({ 
     $expand: "Company" 
     }), 
     success: function(response, options) { 
     // hide spinner 
     }, 
     error: function(response) { 
     // hide spinner 
     // show error 
     } 
    }); 
    }, 

    render: function() { 
    var template = QueueView(); 
    this.$el.html(template); 
    return this; 
    } 


}); 

return View; 
}); 

Answer 2

好吧，從這開始吧。貌似有相當多的清理，需要做的=）

var RowsSubView = Backbone.View.extend({ 

    initialize: function() { 
    log.debug(this.collection); 
    }, 

    render: function() { 
    //var html = RowView(); // Looks like you're already placing a tbody as the container 
    //this.setElement(html); 

    this.collection.forEach(function(model){ 
     this.$el.append(RowView(model.toJSON())); // Assuming RowView knows what to do with the model data 
    }); 

    return this; 
    } 

}); 

然後改變renderRowsSubView到

renderRowsSubView: function() { 
    // render rows 
    this.row = new RowsSubView({collection: this.opportunities}); 
    this.row.render(); 
    this.$el.find('tbody').append(this.row.$el.html()); 
    }