javascript - recorrer - ¿Cómo puedo obtener el índice de una matriz en una plantilla de Meteor en cada ciclo?

matriz bidimensional javascript

Question

Digamos que tengo un objeto, someObject:

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

Y un asistente de plantilla que se ve así (y funciona bien):

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

¿Cómo debería construir el html para obtener el índice de matriz?

He intentado:

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

En cuyo caso, this devuelve "abc" y "def" éxito. Lo que es bueno. Pero, ¿cómo puedo obtener el índice de la matriz para poner en el atributo data-value ?

He intentado this.index directamente, pero no está definido. También intenté usar un ayudante:

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

pero en este helper getIndex cuando hago console.log this veo:

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

¿Es posible obtener el índice?

Answer 1

meteoro> = 1.2

Las @index obtuvieron mucha funcionalidad en 1.2, incluido un @index nativo. Los ayudantes ya no son necesarios para resolver este problema. Simplemente puede hacer esto:

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

o, si desea usar el índice dentro de un ayudante:

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

meteoro <1.2

En algún momento en el futuro, las barras espaciales pueden ofrecer la capacidad de determinar el índice directamente en la plantilla. Sin embargo, al momento de escribir esto, la única forma de obtener el índice es modificar el resultado devuelto por el ayudante. Por ejemplo, podría hacer que getArray devuelva una matriz de objetos que contienen un value y un index , como este:

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

Y la plantilla podría usar el índice de esta manera:

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

También vea esta respuesta para un ejemplo similar con los cursores.

Vale la pena mencionar que probablemente no necesite almacenar el índice en el DOM mismo a través data-value , a menos que lo necesite un complemento externo. Como puede ver en el siguiente ejemplo, cada item tiene un contexto con un valor de índice. Para obtener más información, consulte esta publicación de blog .

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

Answer 2

Aquí hay un ejemplo de cómo puede simplemente agregar un índice al objeto y siempre que no tenga una clave llamada índice antes de que no obstruya nada de esta manera, solo funciona con matrices de objetos. Ahora, si tiene una matriz de valores, debe usar Christan Fritz responder

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

Answer 3

Este cambio se coming y podrás hacer {{@index}} . Cuando meteor es compatible con la versión más reciente de manubrios.

Answer 4

Puede cambiar getArray para devolver una matriz de tupples y almacenar el índice allí.

Answer 5

También puedes hacerlo con un guión bajo, suponiendo que hayas suscrito tu plantilla a un conjunto de objetos

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

y en tu html ...

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

Answer 6

Usted puede hacer esto un ayudante reutilizable, también. Es útil tener:

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