Comment rafraîchir l'interface utilisateur d'une autre vue d'une vue présente dans différents onglets de la dorsale?

Question

Je suis nouveau à backbone, dans mon projet actuel, nous utilisons Backbone et Requirejs. Il y a 4 onglets, disons A, B, C, D. Dans l'onglet A i enregistrer des données dans db et dans l'onglet D les données qui sont enregistrées dans l'onglet A doit être displayed.So, j'appelle la méthode render de l'onglet D après opération de sauvegarde dans l'onglet Un est terminé.

Lorsque l'écran est chargé pour la première fois, tous les onglets se chargent correctement avec les données appropriées. Mais quand j'enregistrer les données de l'onglet A et appelle méthode render de l'onglet D ne met pas à jour ui.Problem est que, render() est appelé avec aucune erreur mais ui dans l'onglet D ne reçoit pas rafraîchi.

Après mon code factice pour onglet A:

define(['jquery','backbone','underscore','views_jira/tabDView'], 
    function($,Backbone,_,TabDView) 
    { 
     var TabAView = Backbone.View.extend({ 
      tabDView:new TabDView(), 
      render:function(){ 
       this.model.save(objectToSave,{ 
         success: _.bind(this.saveSuccessCallback, this), 
         error: _.bind(this.saveErrorCallback, this) 
        }); 
      } 
     }); 


     saveSuccessCallback: function (model, response) { 
       tabDView.render() 
     }, 

     saveErrorCallback:function (model, response) { 
     } 
    } 
); 

Voici le code pour onglet D:

define(['jquery','backbone','underscore','collections'], 
    function($,Backbone,_,DataCollection) { 
     var TabDView = Backbone.View.extend({ 
      el:'#myViewDivinHtmlBody' 
      dataCollection:new DataCollection(); 
      render:function(){ 
       this.dataCollection.fetch({ 
        success: _.bind(this.handleOpendTicketsSuccessCallback, this), 
        error: _.bind(this.handleOpendTicketsErrorCallback, this) 
       }); 
      }, 
      handleOpendTicketsSuccessCallback:function(model, response, fetchOptions){ 
       this.$el.find('.mydiv').append(response); 
      }, 
      handleOpendTicketsErrorCallback:function(model, response, fetchOptions){ 
       console.log("Error in fetching the tickets"); 
      } 

     }); 

     return TabDView; 
    } 
) 

Quelqu'un peut-il me dire où je me trompe. Remarque: il n'y a pas d'erreur de console.

Answer 1

Vos vues de backbone doivent être dites à quel élément du DOM à attacher. Si vous ne spécifiez pas cela d'une manière ou d'une autre, alors el et $el sont assignés à une étiquette détachée <div>, pas dans le DOM. Ainsi, le rendu fonctionne sans erreurs, mais n'est pas visible.

Avez-vous un rendu initial réussi avec vos vues? Si c'est le cas, vous devez les avoir attachés à un élément DOM dans un code non inclus dans votre esquisse ici. Par exemple:

var tabAView = new TabAView({el: '#tabA'}); 

ou peut-être

tabAView.setElement('#tabA'); 

Une façon de le prérégler pour toutes les instances de la vue de créer est:

var TabAView = Backbone.View.extend({ 
    el: '#tabA', 
    // etc 
}); 

si la vue est donné un élément au moment de la création ou plus tard, l'élément DOM devrait exister en premier. Si le sélecteur est vide, le el sera à nouveau par défaut <div>.

---

Le poinçon en ligne est, lorsque vous créez la référence à une nouvelle TabDView instance dans votre définition TabAView, assurez-vous qu'il a son ensemble de référence à un élément DOM attaché avant nouveau rendu. Je suggère ce qui suit dans votre TabAView:

saveSuccessCallback: function (model, response) { 
    tabDView.setElement('#tabD'); 
    tabDView.render() 
},