web-dev-qa-db-fra.com

Comment puis-je obtenir l'index d'un tableau dans un modèle Meteor à chaque boucle?

Disons que j'ai un objet, someObject:

{
  foo: "Apple",
  myArray: ["abc", "def"]
}

Et un assistant modèle qui ressemble à ceci (et fonctionne bien):

getArray: function(){
  var self = this;
  self.myArray = self.myArray || [];    
  return self.myArray;
}

Comment dois-je construire le HTML pour obtenir l'index de tableau?

J'ai essayé:

<template name="someObject"> // takes someObject as data
  {{#each getArray}}
    <div class="item" data-value="{{WHAT GOES HERE?}}">{{this}}</div>
  {{/each}}
</template>

Dans ce cas, this renvoie avec succès "abc" et "def". Ce qui est bon. Mais comment puis-je obtenir l'index du tableau à mettre dans l'attribut data-value?

J'ai essayé this.index directement mais ce n'est pas défini. J'ai aussi essayé d'utiliser un assistant:

<template name="someObject"> // takes someObject as data
  {{#each getArray}}
    <div class="item" data-value="{{getindex}}">{{this}}</div>
  {{/each}}
</template>

mais dans cet assistant getIndex quand je console.log out this je vois:

String {0: "a", 1: "b", 2: "c", length: 3}
String {0: "d", 1: "e", 2: "f", length: 3}

Est-il possible d'obtenir l'index?

javascriptmeteorspacebars
30
Oliver Lloyd

météore> = 1.2

Les barres d'espace ont acquis de nombreuses fonctionnalités dans la version 1.2, y compris un @index natif. Les assistants ne sont plus nécessaires pour résoudre ce problème - vous pouvez simplement faire ceci:

{{#each getArray}}
  <div class="item" data-value="{{@index}}">{{this}}</div>
{{/each}}

ou, si vous voulez utiliser l'index à l'intérieur d'une aide:

{{#each getArray}}
  <div class="item" data-value="{{someHelper @index}}">{{this}}</div>
{{/each}}

météore <1.2

Dans le futur, les barres d'espace peuvent offrir la possibilité de déterminer l'index directement dans le modèle. Cependant, à la date de cette écriture, le seul moyen d’obtenir l’index est de modifier le résultat renvoyé par l’assistant. Par exemple, vous pouvez avoir getArray renvoyer un tableau d'objets contenant une value et une index, comme ceci:

getArray: function() {
  var self = this;
  self.myArray = self.myArray || [];
  return _.map(self.myArray, function(value, index){
    return {value: value, index: index};
  });
}

Et le modèle pourrait utiliser l'index comme ceci:

<template name="someObject">
  {{#each getArray}}
    <div class="item" data-value="{{index}}">{{value}}</div>
  {{/each}}
</template>

Voir aussi cette réponse pour un exemple similaire avec les curseurs.

Il est à noter que vous n'avez probablement pas besoin de stocker l'index dans le DOM lui-même via data-value, à moins que cela ne soit nécessaire par un plugin externe. Comme vous pouvez le voir dans l'exemple ci-dessous, chaque item a un contexte avec une valeur d'index. Pour plus d'informations, voir cet article de blog .

Template.someObject.events({
  'click .item': function() {
    console.log(this.index);
  }
});
57
David Weldon

Vous pouvez également en faire une aide réutilisable. C'est pratique d'avoir:

JS:

UI.registerHelper('addIndex', function (all) {
    return _.map(all, function(val, index) {
        return {index: index, value: val};
    });
});

HTML:

{{#each addIndex somearray}}
<div>
   {{index}}: {{value}}
</div>
{{/each}}
20
Christian Fritz

Ce changement est à venir .__ et vous pourrez faire {{@index}}. Lorsque météore prend en charge la version la plus récente du guidon.

9
pcatre

Vous pouvez modifier getArray pour renvoyer un tableau de nuplets et y stocker l'index.

1
Erez Hochman

Vous pouvez aussi le faire avec un trait de soulignement, en supposant que vous ayez souscrit votre modèle à un tableau d'objets

Template.yourTemplate.helpers({
  objectsWithIndex: function() {
    _.map(this.objects, function(value, key) {
      return _.extend(value, {
        index: key
      });
    });
    return this.objects;
  }
});

et dans votre html ...

<template name="someObject">
  {{#each objectsWithIndex}}
    <div class="item" data-value="{{index}}">{{value}}</div>
  {{/each}}
</template>
0
jasenkoh

Voici un exemple de la façon dont vous pouvez simplement ajouter un index à l’objet et tant que vous n’avez pas de clé nommée index avant qu’elle ne gêne quoi que ce soit de cette façon, elle ne fonctionne que pour les tableaux d’objets. Maintenant, si vous avez un tableau de valeurs, vous devriez utiliser la réponse de Christan Fritz

UI.registerHelper("withIndex", function(obj) {
  obj = obj || [];
  _.each(obj, function (object, index) {
    obj[index].index = index;
  });
  return obj;
});

{#each withIndex fields}}
   <div class="form-group field" data-index="{{index}}">
      <label for="{{name}}">{{title}}</label> 
    </div>
{{/each}}
0
Patrick Mencias-lewis