Question

我正在尝试学习Backbone.js，我现在使用this page上的示例来创建一个集合中的视图。为此，我使用了一个集合：

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;
    }
});

对话的一个视图和联系事件的一个视图（联系事件基本上是一条消息）：

var ConversationView = Backbone.View.extend({
    render: function(){
        this.collection.each(function(contactEvent){
            var contactEventView = new ContactEventView({model: contactEvent});
            this.$el.append(contactEventView.render().el);
        }, this);
        return this;
    }
});

var ContactEventView = Backbone.View.extend({
    template: _.template($('#contact-event-template').html()),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

引用的#contact-event-template如下所示：

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

然后我尝试将其附加到此div（<div id="put-conversation-here">put the conversation here!</div>）：

var contactEventCollection = new ContactEventCollection([], {id: 1, lastContactEventId: 0});
contactEventCollection.fetch();
console.log(contactEventCollection);
var conversationView = new ConversationView({collection: contactEventCollection});
console.log(conversationView);
$('#put-conversation-here').append(conversationView.render().el);

在控制台中，我看到conversationView看起来像下图。奇怪的是，我确实有一个集合，我确实有一个包含所有这些模型的视图，但是附加的内容只是一个空的：<div></div>（甚至没有class="user-message"）。< / p>

我还尝试用一个简单的对象this.model.toJSON()替换{text: "some text"}，但无济于事。到现在为止，我完全迷失了，可以得到任何帮助。如果可以的话，我会立即为此付出赏金，但不幸的是我必须等两天才能做到这一点。

有人知道我在哪里出错吗？所有帮助，提示或技巧都表示赞赏！

enter image description here

Answer 1

contactEventCollection.fetch();被称为异步，在获取数据之前，您的html正在呈现。

您可能想要使用

$.when(contactEventCollection.fetch()).done(function(){html population});

Answer 2

Collection.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);
  }
});

Answer 3

在这种情况下，您可以拥有这样的代码。（coffeescript中的代码）

//在你看来。

 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的权限，避免为您的所有项目访问，这样做更具性能：）

如何在视图中正确呈现Backbone集合？

3 个答案: