10
votes

Backbone.js Mise à jour des modèles dans une collection

Disons que vous construisez un clone Twitter avec coldbone.js. Vous avez une collection de tweets. Chaque tweet est évidemment une instance du modèle Tweet.

Vous créez une instance de la collection, récupérez les 10 derniers tweets, les rendant et ajoutez à la DOM.

jusqu'à présent si bon.

Et si vous vouliez appeler un appel au serveur quelques minutes plus tard pour voir si de nouveaux tweets sont arrivés? Comment pouvez-vous ajouter les tweets nouvellement arrivés à la collection?

Si vous utilisez la méthode FETCH () , vous frappez la même URL tout le temps. C'est très bien. Y a-t-il une manière intelligente que je puisse utiliser la colonne vertébrale / un soulignement pour filtrer ces personnes et ajouter les tweets qui ne sont pas dans la collection à la collection?


1 commentaires

Si vous souhaitez mettre à jour les tweets, c'est une solution bien meilleure implémente un serveur en temps réel que d'avoir un sondage pour de nouveaux tweets.


5 Réponses :


0
votes

À l'heure actuelle, hors de la boîte, non.

L'utilisation de I technique est la suivante. Vous avez votre TweetCollection qui se prolongent Backbone.Collection et il a une URL REST classique comme « / tweets ». Votre backend envoie seulement les 10 derniers enregistrement (ou page 1). Pour obtenir la page 2 vous pouvez utiliser une URL comme « / tweets? Page = 2 » et le backend enverriez les 10 prochains tweets. La question est vraiment: comment voulez-vous garder vieux disque lors de l'extraction nouveau p>

J'utilise 2 collections: p>

  • La première est celle qui est utilisée pour rendre les tweets sur l'écran. Il est un TweetCollection normal. li>
  • Le second est celui utilisé pour obtenir les pages du serveur. Appelons-le TweetPageCollection. Li> Ul>

    TweetPageCollection étend TweetCollection à l'adresse suivante: p>

    initialize: function(){
      this.tweets = new TweetCollection();
      this.pages = new TweetPageCollection();
      this.pages.bind("refresh", this.newPageReceived);
    
      this.pages.page = 1;
      this.pages.fetch();
    
      this.tweet_list_view = new TweetListView({model: this.tweets});
    },
    getNextPage: function(){
      this.pages.page++;
      this.pages.fetch();
    },
    newPageReceived : function(page){
      // here you can check that the tweet is not already in the tweets collections
      this.tweets.add(page.toArray());
    }
    ...
    


0 commentaires

0
votes

Je ne pense pas que ce soit un problème de colonne vertébrale. Utilisation de l'API reposante de Twitter Vous pouvez utiliser le paramètre en option depuis_id. Après chaque appel, votre collection pourrait enregistrer l'ID du plus récent Tweet qu'il a récupéré. Utilisez cet identifiant dans votre fonction URL et vous ne recevrez que de nouveaux tweets.


1 commentaires

Cela ne consiste pas à construire une interface pour Twitter. C'est une application de twitter.



16
votes

permet de supposer que chacun de vos tweets a un identifiant unique (sinon, vous devez probablement en créer un).

Vous pouvez structurer votre backend dans ce type que par défaut, il vous obtient 10 derniers tweets si vous appelez < un href = "http://your.site.com/tweets"> http://your.site.com/tweets sans aucun argument.

Si vous appelez cependant http://your.site.com/tweets?last_tweet_id=blabla , il vous donnera 10 derniers tweets qui sont venus après le last_tweet_id que vous avez spécifié.

Vous pouvez remplacer le code qui obtient les données du backend dans votre collection en implémentant votre méthodeCollection.sync.

Raison: Backbone.Collection d'abord tente d'appeler Collection.Sync et si ce n'est pas implémenté, il appelle la fonction BOIDBONE.SYNC, de sorte que si vous implémentez votre pièceCollection.sync, il sera utilisé. Voici le snippet de backbone.collection.fetch Fonction: xxx

donc votre synchronisation serait donc quelque chose comme xxx

vous devrait remplacer votre fonction d'analyse de vos collections pour vous assurer que la réponse est annexée au tableau existant de modèles.


1 commentaires

Je suis curieux de savoir pourquoi vous spécifiez la méthode HTTP ici. Ne serait-il pas plus conventionnel d'une perspective de repos?



8
votes

Je ne sais pas si cela était possible en mars, car je n'ai commencé que récemment à l'aide de la colonne vertébrale. Mais une meilleure solution peut être de passer des options jQuery standard dans la collection.fetch. xxx

Découvrez la documentation JQuery pour une liste complète des paramètres.


0 commentaires

2
votes

Je crois que c'est ce que vous recherchiez: xxx pré>

Ensuite, vous pouvez lier le rendu de la vue de votre collection à l'événement Ajouté: P>

yourCollectionView.bind('add', this.delayedRender, this);

delayedRender: function() {
  var self = this;
  if (self.renderTimer) { clearTimeout(self.renderTimer); }
  self.renderTimer = setTimeout(function() {
    self.render();
    self.renderTimer = null;
  }, 300);
}


0 commentaires