javascript - цикле - сравнить каждый элемент массива с каждым js




Как я могу получить индекс массива в шаблоне Meteor каждый цикл? (4)

Скажем, у меня есть объект, someObject:

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

И помощник шаблона, который выглядит так (и отлично работает):

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

Как мне построить html для получения индекса массива?

Я пробовал:

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

В этом случае this успешно возвращает "abc" и "def" . И это хорошо. Но как я могу заставить индекс массива помещать в значение data-value атрибута?

Я пробовал this.index напрямую, но он не определен. Я также попытался использовать помощника:

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

но в этом помощнике getIndex когда я console.log, я вижу:

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

Можно ли получить индекс?


метеор> = 1,2

Spacebars получила множество функциональных возможностей в 1.2, включая родной @index . Помощники больше не нужны для решения этой проблемы - вы можете просто сделать это:

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

или, если вы хотите использовать индекс внутри помощника:

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

метеор <1.2

Когда-нибудь в будущем, пространственные бары могут предложить возможность определять индекс непосредственно в шаблоне. Однако, начиная с этой записи, единственным способом получить индекс является изменение результата, возвращаемого помощником. Например, вы могли бы getArray вернуть массив объектов, которые содержат value и index , например:

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

И шаблон может использовать индекс следующим образом:

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

Также см. Этот ответ для аналогичного примера с курсорами.

Стоит отметить, что вам, вероятно, не нужно хранить индекс в самой DOM с помощью data-value , если только это не требуется внешним плагином. Как видно из приведенного ниже примера, каждый item имеет контекст с индексом. Для получения дополнительной информации см. Это сообщение в блоге .

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

Вот пример того, как вы можете просто добавить индекс к объекту, и пока у вас не было ключа с именем index, прежде чем он не должен препятствовать чему-либо, этот способ работает только с массивами объектов. Теперь, если у вас есть массив значений, вы должны использовать ответ Кристана Фрица

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

Вы можете сделать это снова используемым помощником. Удобно иметь:

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

Вы можете сделать это также с подчеркиванием, предполагая, что вы подписали свой шаблон на массив объектов

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

и в вашем html ...

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




spacebars