用Backbone渲染表格

Question

我需要我的代碼幫助，我正在嘗試爲我的社交項目學習Backbone。我試圖呈現從一個集合，我從一個API得到（deployd API）

這裏的視圖是表的HTML代碼：

<div class="container-fluid"> 
<table id= "teachers"> 
<thead> 
<tr> 
    <th>Name</th> 
    <th>Last Name</th> 
    <th>Code</th> 
    <th>Last time online</th> 
</tr> 
</thead> 
<tbody id="table-body"></tbody> 
</table> 
</div> 

<script type="text/template" id="teacher-template"> 
<td><%= name %></td> 
<td><%= lastname %></td> 
<td><%= code %></td> 
<td><%= lastactivity %></td> 
</script> 

這裏是JS代碼：

var TeacherModel = Backbone.Model.extend({ 
defaults: { 
    id:'', 
    name: '', 
    lastname: '', 
    code: '', 
    lastactivity: '' 
} 
}); 
var TeacherCollection = Backbone.Collection.extend({ 
    url: "/teachers", 
    model: TeacherModel 
}); 
var teachercollection = new TeacherCollection(); 
teachercollection.url = '/teachers'; 
teachercollection.fetch({ 
    success: function(collection, response) { 
    console.log("Done!!"); 
    }, error: function(collection, response) { 
    alert(response); 
    } 
}); 
var TeachersView = Backbone.View.extend({ 
    el: '#table-body', 
    initialize: function() { 
    this.render(); 
    }, 
    render: function() { 
    this.$el.html(''); 
    teachercollection.each(function(model) { 
    var teacher = new TeacherView({ 
    model: model 
    }); 
    this.$el.append(teacher.render().el); 
}.bind(this)); 
return this; 
    } 
}); 
var TeacherView = Backbone.View.extend({ 
    tagName: 'tr', 
    template: _.template($('#teacher-template').html()), 
    render: function() { 
    this.$el.html(this.template(this.model.attributes)); 
    return this; 
    } 
}); 
// Launch app 
var app = new TeachersView; 

所以我的問題是，我怎麼可以將集合傳遞給視圖或集合的視圖模型？我想從表格中的每一行渲染數據。瀏覽器獲取集合，你可以在這裏看到：

我一直在嘗試了幾天，我只是無法理解的邏輯，我已經閱讀文檔，和一點點的阿迪奧斯馬尼的書，但只是不能讓我的頭，它可以解釋給我嗎？一直在尋找在這個網站的答案，但其中一些包括一些「添加模型」的東西，這讓我更加困惑。

（圖像中的模型的參數，從代碼不同。我會翻譯，使之更容易理解。）

Answer 1

我怎麼能傳遞一個集合到一個視圖，或收集模型的一個視圖？

你已經在做，在你的代碼：

var teacher = new TeacherView({ 
    model: model 
}); 

在這裏，我們通過一個模型中使用的模型選項來查看的構造。

你可以通過一個集合通過它的構造像查看：

var app = new TeachersView({ 
    collection:teachercollection 
}); 

，你可以在視圖內通過this.collection和this.model分別訪問。

var TeachersView = Backbone.View.extend({ 
    el: '#table-body', 
    initialize: function() { 
    this.render(); 
    }, 
    render: function() { 
    this.$el.html(''); 
    this.collection.each(function(model) { 
     this.$el.append(new TeacherView({ 
     model: model 
     }).el); 
    },this); 
    return this; 
    } 
}); 

注意fetch() is asynchronous，所以你需要等待，直到它渲染視圖前成功。

請參閱此answer中有關我對渲染方法所做更改的建議。

這個answer可能有助於理解一個或兩個事物。