web-dev-qa-db-ja.com

ループごとにMeteorテンプレートの配列のインデックスを取得するにはどうすればよいですか？

オブジェクト、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 out thisを見ると：

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

インデックスを取得することは可能ですか？

javascriptmeteorspacebars
30
Oliver Lloyd

流星> = 1.2

スペースバーは、ネイティブ@indexを含む1.2で多くの機能を獲得しました。この問題を解決するためにヘルパーは必要なくなりました-これを行うことができます：

{{#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>

カーソルを使用した同様の例については、 this answer も参照してください。

外部プラグインで必要でない限り、data-valueを介してDOM自体にインデックスを保存する必要はおそらくないことを言及する価値があります。以下の例でわかるように、各itemにはインデックス値を持つコンテキストがあります。詳細については、 このブログ投稿 を参照してください。

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

これも再利用可能なヘルパーにすることができます。持っていると便利です：

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

この変更は coming であり、{{@index}}。 meteorがハンドルバーの最新バージョンをサポートする場合。

9
pcatre

Get Arrayを変更して、タプルの配列を返し、そこにインデックスを保存できます。

1
Erez Hochman

テンプレートをオブジェクトの配列にサブスクライブしていることを前提に、アンダースコアでも実行できます

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>
0
jasenkoh

オブジェクトにインデックスを追加する方法の例を次に示します。これは、この方法がオブジェクトの配列でのみ機能するようにする前に、indexという名前のキーがなかった場合に限ります。値の配列がある場合は、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