javascript - 如何仅在获取所有数据后才将模型传递给 View ？

Question

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

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 条消息，那么通过模型获取它是完全错误的。

主干模型是一个单一的实体，可以被视为类似于数据库表中的一行。

例如消息模型应该将数据库表的列作为其属性，并且模型的实例精确映射到表中的一行。

您实际上尝试使用上面的 ajax 调用获取的是消息数量，为此您应该使用 Backbone Collection。主干集合包含许多模型。

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

使用collection的fetch方法从后端获取你的消息。

为了在获取数据后渲染 View ，您可以为主干集合的“重置”事件定义一个事件监听器。

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

模型类似于数据库表中的单独行。