Backbone: plusieurs modèles de vues pour le même modèle

Newbie épine dorsale question:

Contexte: la Construction d'une liste de courses avec épine dorsale

J'ai un modèle de classe appelé avec le nom, la description et les balises (array) des propriétés.
Je voudrais créer deux vues basées sur ce modèle ou sur ce modèle de la collection.

Première vue affiche tous les éléments comme ceci:

<ul>
<li><h3>Item 1 Name</h3>
<p>Item 1 Description</p>
<p>Tag1, Tag2 ,Tag3</p>
</li>
.......
</ul>

Second point de vue va afficher une liste de mots et le nombre d'articles marqués comme ceci:

<ul>
<li>Tag1<span>{count of items tagged with tag1}</span></li>
<li>Tag2<span>{count of items tagged with tag2}</span></li>
<li>Tag3<span>{count of items tagged with tag3}</span></li>
</ul>

J'ai construit le modèle, la collecte et l'afficher à l'appui de la première vue. Je voudrais savoir la bonne façon d'utiliser le modèle existant (ou en créer un nouveau modèle?) pour construire le second point de vue.

Merci d'avance...

un Élément existant de modèle et de collection (extraction de Todo.js exemple)

window.Item = Backbone.Model.extend({
//Default attributes for a todo item.
defaults: function() {
return {
order: Items.nextOrder()
};
}
});


window.ItemList = Backbone.Collection.extend({

model: Item,

localStorage: new Store("items"),

nextOrder: function() {
  if (!this.length) return 1;
  return this.last().get('order') + 1;
},

comparator: function(item) {
  return item.get('order');
}

});

Mise à JOUR: Même si la substitution de la méthode parse() fonctionne lors de l'affichage des noms de Balise avec le nombre d'éléments, j'ai été incapable de rafraîchissement nom de balise/nombre d'éléments de la liste après l'ajout d'un nouvel élément. Cela peut être dû au fait que les points de vue sont rendu à partir de différentes collections. Je vais essayer l'extension de la ItemList de la collecte et de la substitution de la méthode parse (). Toute aide est grandement appréciée.

source d'informationauteur Alper

  1. 12

    @machineghost est droit, Les modèles sont totalement découplées de la vue, de sorte que vous pouvez faire autant de points de vue attachés à le même modèle que vous s'il vous plaît. Vous pouvez également étendre d'un point de vue, si ils ont de la logique ou les attributs que vous souhaitez partager. Lorsque j'utilise le Squelette je me retrouve souvent à l'extension d'un parent de la vue juste de remplacer le render fonction, ou de fournir un autre modèle.

    Première vue

    ShoppingCartView = Backbone.View.extend({
  model: ShoppingCart
  ...
});

    Deuxième avis indépendant

    CheckoutView = Backbone.View.extend({
  model: ShoppingCart
  ...
});

    Seconde vue s'étend de la première

    CheckoutView = ShoppingCartView.extend({ 
  template: a_different_template //syntax depends on your templating framework
  ... 
});
  2. 3

    Je suis assez nouveau à Backbone.js moi-même, afin de prendre cette réponse avec un grain de sel, mais je pense que ... vous venez de faire le second point de vue. Le point de l'ensemble de couplage de modèles et points de vue est de faire en sorte que vous n'avez pas besoin de faire quelque chose pour les modèles si tout ce que vous voulez faire est de faire quelque chose de différent avec votre point de vue.

    Donc, je pense vous avez juste besoin de créer YourView2, de lui dire d'utiliser le même modèle que YourView1 et vous devriez être en affaires.

  3. 3

    Paul Yoder de Backbone.js groupe google a fourni la solution.
    Vous pouvez l'afficher ici

  4. 0

    Après un peu de recherche, j'ai trouvé Collection.Analyser méthode qui semble être le bon endroit pour la transformation de la réponse après un fetch() de l'opération. Regarde comme je vais avoir besoin d'un nouveau modèle, la collecte et l'affichage des objets. C'est de cette façon que j'ai implémenté la fonction d'analyse dans ma collection d'objet. Testé avec succès dans google Chrome. N'hésitez pas à suggérer des améliorations

        <snip>
    parse: function(response) {

        var items = response; //the raw item model returned from localStorage  
        var tagNameItemCount = [];
        var selectedTags = ["Tag1", "Tag2", "Tag3"];
        for(i = 0; i < selectedTags.length; i++){
            var currentTagName = selectedTags[i];
            var currentItemCount = this.getItemsCountByTagName(currentTagName, items);
            tagNameItemCount.push({tagName: currentTagName, tagCount: currentItemCount});
        }

        return tagNameItemCount;



       },
getItemsCountByTagName: function (tagName, items) {
                        var taggedItems = _.filter(items, function(item){ return _.include(item.tags, tagName); });
                        return taggedItems.length;
                       },

     </snip>