オブジェクト、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}
インデックスを取得することは可能ですか?
スペースバーは、ネイティブ@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}}
将来、スペースバーを使用して、テンプレート内でインデックスを直接決定できるようになる可能性があります。ただし、これを書いている時点では、インデックスを取得する唯一の方法は、ヘルパーから返された結果を変更することです。たとえば、次のように、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);
}
});
これも再利用可能なヘルパーにすることができます。持っていると便利です:
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}}
この変更は coming であり、{{@index}}
。 meteorがハンドルバーの最新バージョンをサポートする場合。
Get Arrayを変更して、タプルの配列を返し、そこにインデックスを保存できます。
テンプレートをオブジェクトの配列にサブスクライブしていることを前提に、アンダースコアでも実行できます
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>
オブジェクトにインデックスを追加する方法の例を次に示します。これは、この方法がオブジェクトの配列でのみ機能するようにする前に、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}}