如何在获取所有数据后才将模型传递给视图？

Question

如何在视图获取所有数据后才将模型传递给视图？我有一个名为 Messages 的模型，它获取一个包含 100 个消息对象的数组。我想将其传递给我的视图进行渲染，但是当我传递它们时没有任何反应，因为我的模型尚未完成获取所有消息的操作。我该怎么做？

app.js

$(document).ready(function() {
  messages = new Messages();
  messagesView = new MessagesView({model: messages});
});

messagesView.js

var MessagesView = Backbone.View.extend({

  initiaize: function() {
    console.log('works');
  },

  sanitizeHtml: function(html) {
    if (html === null) {
      return 'null';
    } else if (html === undefined) {
      return 'undefined';
    }

    var result = "";
    for (var i = 0;i < html.length;i++) {
      switch (html[i]) {
      case ">":
        result += "&gt;";
        break;
      case "<":
        result += "&lt;";
        break;
      default:
        result += html[i];
        break;
      }
    }
    return result;
  },

  getUserName: function(){
      var name = 'username'.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
      var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
          results = regex.exec(location.search);
      return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  },

  renderFriends: function(){
    $('#friends-list').empty();
    _.each(this.friends, function(friend) {
      $('#friends-list').append('<li>' + friend + '</li>');
    });
  },

  renderMessages: function() {
    var context = this;
    $('#msg-log').text('');
    _.each(this.model.get('data').results, function(msg) {
      var text = context.sanitizeHtml(msg.text);
      var username = context.sanitizeHtml(msg.username);
      if (msg.room === context.model.roomName) {
        var url = $("<a class='link' href='' data-name='" + username + "'>" + username + "</a>");
        $('#msg-log').append(url);
        if (_.contains(context.model.friends, username)) {
          $('#msg-log').append($("<span><b>: " + text.substring(0, 44) + "</b></span>"));
        } else {
          $('#msg-log').append($("<span>: " + text.substring(0, 44) + "</span>"));
        }
        $('#msg-log').append('<br>');
      }
    });
  },
});

messagesModel.js

var Messages = Backbone.Model.extend({

  initialize: function() {
    setEventListeners();
    this.set('friends', []);
    this.set('data', []);
    this.set('roomName', undefined);
    this.fetch();
  },

  send: function(message){
    $.ajax({
      url: 'https://api.parse.com/1/classes/chatterbox',
      type: 'POST',
      data: JSON.stringify({
       text: message,
       username: this.getUserName(),
       room: this.get('roomName')
      }),
    });
  },

  fetch: function(){
    var context = this;
    $.ajax({
      url: 'https://api.parse.com/1/classes/chatterbox',
      type: 'GET',
      data: {
        limit: 14,
        order: '-createdAt'
      },
      success: function(data) {context.set('data', data) }
    });
  },
 });

Answer 1

从逻辑上讲，如果您有 100 条消息，那么通过模型获取它是完全不正确的。

一个 Backbone 模型是一个单一的实体，可以被认为类似于数据库中的一行 table。

例如一个消息模型应该将你的数据库 table 的列作为它的属性，你的模型的一个实例应该精确地映射到你的 table.

中的一行

您实际尝试使用上面的 ajax 调用获取的是消息数量，您应该使用 Backbone 集合。 backbone 集合中包含多个模型。

因此，在您的情况下，您的 backbone 消息集合将包含您尝试获取的 100 条消息。

使用集合的 fetch 方法从后端检索您的消息。

为了在获取数据后呈现您的视图，您可以为 backbone 集合的 "reset" 事件定义一个事件侦听器。

永远记住，要从您的 table 中获取行列表，请使用集合。

模型类似于数据库中的单个行 table。

如何在获取所有数据后才将模型传递给视图？

How do you only pass a model to the view once it has fetched all it's data?

javascript

jquery

backbone.js