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

尝试将您的收藏集传递到您的视图

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

并在您的模板中使用下划线_.each功能将收集潜水到这样的个人交流

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

它现在必须工作：）

Answer 2

因此，问题与此问题中的问题相同 - 由于.fetch()方法的异步性，在呈现视图后加载了集合，因此它什么也没收到。因此，从.fetch()移除initialize方法并将其添加到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;
    }
});

在select标签内返回一个集合

2 个答案: