Backbone.js la mise à jour de modèles dans une collection

Disons que vous êtes la construction d'un clone de Twitter Backbone.js. Vous avez une collection de tweets. Chaque tweet est évidemment une instance du Tweet modèle.

Vous créez une instance de la collecte, de récupérer les 10 derniers tweets, de rendu et de les ajouter au DOM.

So far So good.

Ce que, si vous vouliez faire un appel vers le serveur quelques minutes plus tard pour voir si de nouveaux tweets sont arrivés? Comment pouvez-vous ajouter les nouveaux arrivés, les tweets de la collection?

Si vous utilisez le fetch() méthode, vous sont frapper la même URL, tout le temps. C'est très bien. Est-il un moyen astucieux que je peux utiliser Backbone/trait de Soulignement pour les filtre et ajouter les tweets qui ne sont pas dans la collection de la collection?

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

OriginalL'auteur Honza Pokorny | 2011-03-24

16

Permet de supposer que chacun de vos tweets a un identifiant unique(si non, vous devriez probablement en créer un).

Vous pouvez structurer votre backend de telle façon que, par défaut, il vous permet de vous 10 derniers tweets si vous appelez http://your.site.com/tweets sans aucun argument.

Si vous appelez http://your.site.com/tweets?last_tweet_id=BLAblaBlA, il vous donnera 10 tweets les plus récents de ce qui est venu après la last_tweet_id que vous avez spécifié.

Vous pouvez remplacer le code qui récupère les données depuis le backend dans votre Collection par la mise en œuvre de YourCollection.méthode de synchronisation.

Raison: L'Épine Dorsale.Collection tente d'abord d'appel de la Collection.synchronisation et si elle n'est pas mise en œuvre, il appelle épine Dorsale.la fonction de synchronisation, de sorte que si vous mettez en œuvre YourCollection.synchronisation, il sera utilisé. Voici l'extrait de code à partir de la colonne vertébrale.Collection.fonction d'extraction:
```
(this.sync || Backbone.sync)('read', this, success, error);
```
afin de synchronisation serait quelque chose comme
```
var TweetCollection = Backbone.Collection.extend({
  model: TweetModel,
  sync: function(method, collection, success, error) {
    var requestData={};
    if(collection.length>0) {
        requestData.last_tweet_id=collection.last.id 
    }
    var params = {
        url:          "/tweet",
        type:         "POST",
        data:         requestData,
        success:      success,
        error:        error
    };
    $.ajax(params);
  }
}
```
Vous devez remplacer vos collections analyser afin d'être sûr que la réponse est annexée à la vaste gamme de modèles.

C'est tout à fait brillant. Merci, l'homme.
Je suis curieux de savoir pourquoi vous êtes en précisant POST que la méthode http ici. Ne pas OBTENIR plus conventionnel à partir d'un RESTE de perspective?

OriginalL'auteur
8

Je ne suis pas sûr si c'était possible de retour en Mars, comme je l'ai commencé que récemment à l'aide de la colonne vertébrale. Mais une meilleure solution peut être de passer à jQuery standards options dans la Collection.fetch.
```
this.collection.fetch({data: {last_tweet: last_teet_id}});
```
Découvrez le jQuery documentation pour une liste complète des paramètres.

+, semble plus agréable pour moi aussi.

OriginalL'auteur

Je crois que c'est ce que vous cherchez:

yourCollection.fetch({add: true})

Ensuite, vous pouvez lier votre vue de collection de rendu d'ajout d'événement:

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

Cependant, si le rendu est lourd, vous aurez envie de la retarder avec un délai d'expiration pour éviter immédiatement l'appelant pour tous les plus de la collection:

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

OriginalL'auteur

0

Actuellement, hors de la boîte, pas de.

La technique que j'utilise est le suivant. Vous avez votre TweetCollection qui s'étendent de la colonne vertébrale.Collection et il a un classique RESTE l'url "/tweets" . Votre backend est d'envoyer seulement les 10 dernières enregistrement (ou de la page 1). Pour obtenir la page 2 vous pouvez utiliser une url de la forme "/tweets?page=2" et le backend d'envoyer le prochain 10 tweets. La question est vraiment: comment gardez-vous d'ancien enregistrement pendant que l'extraction de nouveau?

- Je utiliser 2 collections:
- La première est celle qui a été utilisée pour rendre les tweets sur l'écran. Il est normal TweetCollection.
- La deuxième est celle qui a été utilisée pour obtenir les pages du serveur. Appelons ça de la TweetPageCollection.
TweetPageCollection s'étend TweetCollection avec l'url suivante:
```
 page: 1,
 url : function(){ return "/tweets?page=" + this.page; }
```
Maintenant dans votre contrôleur de code que vous pouvez faire quelque chose comme ceci:
```
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());
}
...
```
Maintenant, lorsque vous voulez récupérer de nouveaux tweets, vous appelez getNextPage() et lorsque le XHR va réussir votre point de vue sera actualisé.

Mêmes principes peuvent être appliqués à réextraire les derniers tweets. 2 collections, 1 extraction, la rencontre extrait.

OriginalL'auteur
0

Je ne pense pas que c'est un squelette à la question. À l'aide de Twitter API RESTful vous pouvez utiliser l'option since_id paramètre. Après chaque appel de votre collection pourrait enregistrer l'id de la plus récente tweet qu'il a récupérés. Utilisez cet id dans l'url de la fonction et vous ne recevrez plus récents tweets.

Ce n'est pas sur la construction d'une interface de Twitter. C'est un Twitter-like application.

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.