Javascript 如何在视图中正确渲染主干集合？

我正在尝试学习，现在使用上的示例从集合创建视图。为此，我使用了一个集合：

var ContactEventCollection = Backbone.Collection.extend({
    initialize: function(models, options) {
        this.id = options.id;
        this.lastContactEventId = options.lastContactEventId;
    },
    url: function() {
        return 'ticket/' + this.id + '/contact-events/' + this.lastContactEventId;
    }
});

一个视图用于对话，一个视图用于联系人事件（联系人事件基本上是一条消息）：

引用的联系人事件模板如下所示：

<script type="text/template" id="contact-event-template">
    <div class="user-message"><%= text %></div>
</script>

在控制台中，我看到conversationView如下图所示。奇怪的是，我确实有一个集合，我确实有一个包含所有这些模型的视图，但附加的只是一个空的：

（甚至没有

class=“user message”

）

我还尝试用一个简单的对象替换

this.model.toJSON（）

：

{text:“some text”}

，但没有效果。到现在为止，我完全迷路了，我需要任何我能得到的帮助。如果可以的话，我会立即为此悬赏，但不幸的是，我不得不等两天才这么做

有人知道我哪里出了问题吗？感谢所有帮助、提示或技巧

---

contactEventCollection.fetch（）的

contactEventCollection

被称为async，在获取数据之前，您的html将被呈现

您可能想使用

---

$.when（contactEventCollection.fetch（））.done（function（）{html population}）

集合。fetch

被称为异步，因此当您尝试访问它时，您的结果还不存在

做到这一点的“主干方法”是倾听事件，并确保您的观点将做正确的事情，无论集合处于何种状态

理想情况下，您的视图涵盖收藏的整个生命周期，因此它始终表示当前状态：

var ConversationView = Backbone.View.extend({
  initialize: function () {
    // add a view when a model is added to the collection.
    this.listenTo(this.collection, 'add', this.addContactEventView);
  },
  render: function () {
    // create views for all existing models
    this.collection.each(addContactEventView, this);
    return this;
  },
  addContactEventView: function (model) {
    var contactEventView = new ContactEventView({model: contactEvent});
    this.$el.append(contactEventView.render().el);
    // remove the view when model destroys.
    contactEventView.listenTo(model, 'remove', contactEventView.remove);
  }
});

---

在本例中，您可以使用这样的代码

//在你的视野里

 template ://receive the template html in you case ('#contact-event-template')

initialize:->
    @listOfContact = ''
    @collection = new ContactEventCollection()
    @collection.on 'triggeredEvent', @render, @
    @collcetion.getConversations()


render:->
    @collection.each (model) =>
          @listOfContact += @template(item.toJSON())
    @$el.html(@listOfContact)

---

这样，您只需对DOM进行一次访问，避免对集合中的每一项都访问DOM，这更有效：）

可能是

contactEventCollection.fetch（）

被称为async，在获取数据之前，您的html是否被呈现？您可能需要使用

$.when（contactEventCollection.fetch（））.done（function（）{html population}）但不确定。@Pushkar-先生，你真是太棒了。就这样，谢谢！我不是师傅，刚开始用。我们用的是handlebar.js。请在邮件上注明已回复。
var ConversationView = Backbone.View.extend({
  initialize: function () {
    // add a view when a model is added to the collection.
    this.listenTo(this.collection, 'add', this.addContactEventView);
  },
  render: function () {
    // create views for all existing models
    this.collection.each(addContactEventView, this);
    return this;
  },
  addContactEventView: function (model) {
    var contactEventView = new ContactEventView({model: contactEvent});
    this.$el.append(contactEventView.render().el);
    // remove the view when model destroys.
    contactEventView.listenTo(model, 'remove', contactEventView.remove);
  }
});

 template ://receive the template html in you case ('#contact-event-template')

initialize:->
    @listOfContact = ''
    @collection = new ContactEventCollection()
    @collection.on 'triggeredEvent', @render, @
    @collcetion.getConversations()


render:->
    @collection.each (model) =>
          @listOfContact += @template(item.toJSON())
    @$el.html(@listOfContact)