返回一個選擇標籤內的集合

Question

我有一個具有不同屬性的模型集合，我需要在<select>標籤內呈現其中的一部分，每個模型爲<option>。呈現此集合的視圖嵌套在另一個視圖中。下面是我收集：

var UserCollection = Backbone.Collection.extend({ 
    url: 'http://localhost:3000', 

    developers: function() { 
     var developers = this.where({role: "developer"}); 
     return new UserCollection(developers); 
    } 
}); 

這是我對select標籤視圖：

var InterviewersView = Backbone.View.extend({ 
    initialize: function() { 
     this.template = _.template(interviewersTemplate); 
     this.collection = new UserCollection(); 
     this.collection.fetch(); 
     this.interviewers = this.collection.developers(); 
    }, 

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

，這是我的模板：

<label>Interviewer</label> 
<select class="form-control" id="js-interviewer-selector"> 
    <% _.each(this.interviewers.toJSON(), function(interviewer) { %> 
     <option value="<%= interviewer.login %>"> 
     <%= interviewer.firstName %> <%= interviewer.lastName %> 
     </option> 
    <% }) %> 
</select> 

模板另一個視圖中正確呈現和完全按照我的需要，但select標籤內沒有選項，它是空的。我究竟做錯了什麼？

Repo with my project

Answer 1

因此，問題與此問題相同 - 由於.fetch()方法的異步性質，集合在視圖呈現後加載，因此它沒有收到任何內容。因此，從initialize中刪除.fetch()方法並將其添加到render工作。下面是完整的代碼：

var InterviewersSelect = Backbone.View.extend({ 
    initialize: function() { 
     this.template = _.template(interviewersTemplate); 
     this.collection = new UserCollection(); 
    }, 

    render: function() { 
     var self = this; 

     this.collection.fetch({ 
      data: { 
       role: "developer" 
      }, 

      success: function(collection) { 
       var interviewers = collection.map(function(item) { 
        return item.toJSON(); 
       }); 
       self.$el.html(self.template({interviewers: interviewers})); 
      } 
     }); 

     return this; 
    } 
}); 

Answer 2

嘗試到您的收藏傳遞給你的看法是這樣

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

，並在模板中使用下劃線_.each功能潛水收集個人interviwer這樣

<select class="form-control" id="js-interviewer-selector"> 
<% _.each(interviewers, function(interviewer) { %> 
    <option value="<%= interviewer.login %>"> 
    <%= interviewer.firstName %> <%= interviewer.lastName %> 
    </option> 
<% }) %> 
</select> 

它現在必須工作:)