如何在模型获取完所有信息后才将其传递给视图's数据

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

本文关键字:视图 数据 获取 模型 信息      更新时间:2024-01-09

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

app.js

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

消息View.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) }
    });
  },
 });

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

主干模型是一个单独的实体,可以认为它类似于数据库表中的一行。

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

使用上面的ajax调用实际要获取的是消息的数量,您应该使用Backbone Collection来获取这些消息。主干集合中包含许多模型。

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

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

为了在获取数据后呈现视图,您可以为主干集合的"重置"事件定义一个事件侦听器。

请始终记住,要从表中获取行列表,请使用集合。

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