web-dev-qa-db-ja.com

Mustache.jsの配列要素のインデックス

これは私がMustache.jsでやりたいことですが、ドキュメントでその方法がわかりません。

var view = {items:['Mercury','Venus','Earth','Mars']};
var template = "<ul> {{#items}}<li>{{i}} - {{.}}</li>{{/items}} </ul>";
var html = Mustache.to_html(template,view);

必要な出力：

<ul>
  <li>0 - Mercury</li>
  <li>1 - Venus</li>
  <li>2 - Earth</li>
  <li>3 - Mars</li>
</ul>
javascriptiteratormustache
14
Dane

Mustache.jsをいじくり回さない代替ソリューション

口ひげを生やしている代わりに、<ol></ol>の代わりに<ul></ul>を使用することもできます。これにより、各アイテムの前にindex+1が付けられます。

必要に応じて、cssを使用して開始番号を0に変更すると、希望どおりにレンダリングされます。番号の後のdotを、" - "などに変更することもできます。 、問題は解決しました。

<ol>
  <li>Mercury</li>
  <li>Venus</li>
  <li>Earth</li>
  <li>Mars</li>
</ol>

上記は次のようにレンダリングされます：

1. Mercury
2. Venus
3. Earth
4. Mars

それを行うMustache.jsの方法

口ひげでそれを行いたい場合の適切な方法は、文字列の配列を、インデックスと文字列値が存在するオブジェクトの配列に変換することです。

// I wrote this from the back of my head, it's untested and not guaranteed
// to work without modifications, though the theory behind it is valid.


var array     = ["123","stackoverflow","abc"];
var obj_array = [];

for (idx in array)
   obj_array.Push ({'index': idx, 'str': array[idx]});

var view     = {items: obj_array};
var template = "<ul>{{#items}}<li>{{index}} - {{str}}</li>{{/items}}</ul>";
var html     = Mustache.to_html(template,view);
17
Filip Roséen - refp

高速でクリーンなソリューションをお探しですか？

index関数を追加するだけです

_var data = {
    items: [{
            name: Aliasghar
            , grade: 19
        }, {
            name: Afagh
            , grade: 20
    }]
    , index: function() {
        return ++window['INDEX']||(window['INDEX']=0);
    }
}
_

テンプレートは次のようになります。

_{{#items}}
    {{index}} -- {{name}} is {{grade}}
{{/items}}
_

使い方

データにindex: function(){}を追加し、それをテンプレートの通常の関数として使用します。この関数は、グローバルに使用可能なwindowオブジェクトにキーを追加します。その後、1つずつ増やしていきます。

複数のリストで使用するには

複数のテンプレートを次々に使用している場合は、_window['INDEX']_をリセットするか、キーを_window['YEKI_DIGE']_などの他のキーに変更する必要があることに注意してください。これを行う別の方法は、resetIndex関数を追加することです。方法は次のとおりです。

_var data = {
    items: [{
            name: Aliasghar
            , grade: 19
        }, {
            name: Afagh
            , grade: 20
    }]
    , index: function() {
        return ++window['INDEX']||(window['INDEX']=0);
    }
    , resetIndex: function() {
        window['INDEX']=null;
        return;
    }
}
_

テンプレートは次のようになります。

_{{#items}}
    {{index}} -- {{name}} is {{grade}}
{{/items}}
{{resetIndex}}
_

この回答に触発されました： https://stackoverflow.com/a/10208239/257479 from dave on Mustacheで、現在のインデックスを取得する方法セクション

20
Alexar

Handlebars.jsを使用できる場合は、この要点に記載されている部分を使用できます： https://Gist.github.com/1048968

参照： Mustacheで、現在のセクションのインデックスを取得する方法

4
rnella01

アイテムごとに複数回インデックスにアクセスしたい場合は、次のようなものをお勧めします。

var data = {
    items: [{
        name: Aliasghar
        , grade: 19
    }, {
        name: Afagh
        , grade: 20
    }]
    , setUpIndex: function() {
        ++window['INDEX']||(window['INDEX']=0);
        return;
    }
    , getIndex: function() {
        return window['INDEX'];
    }
    , resetIndex: function() {
        window['INDEX']=null;
        return;
    }
}
  • Mustacheの各リストを繰り返す前に、restIndex関数を使用してください。
  • 各リストアイテムの先頭にあるsetUpIndex関数を使用して、そのアイテムのインデックスを設定します。
  • getIndexアイテムを使用してインデックスにアクセスします。

例として、これを考えてみましょう。

{{resetIndex}}
{{#items}}
    {{setUpIndex}}
    {{getIndex}}. {{name}} is at index {{getIndex}}
{{/items}}

間違った値を取得せずに、アイテムごとに複数回インデックスにアクセスする方法に注目してください。

3
Tayyab

（ノード4.4.7、口ひげ2.2.1でテスト済み。）

グローバル変数やオブジェクト自体の変更を伴わない、すっきりとした機能的な方法が必要な場合は、この関数を使用してください。

var withIds = function(list, propertyName, firstIndex) {
    firstIndex |= 0;
    return list.map( (item, idx) => {
        var augmented = Object.create(item);
        augmented[propertyName] = idx + firstIndex;
        return augmented;
    })
};

ビューを組み立てるときに使用します。

var view = {
    peopleWithIds: withIds(people, 'id', 1) // add 'id' property to all people, starting at index 1
};

このアプローチの優れた点は、古いセットをプロトタイプとして使用して、「viewmodel」オブジェクトの新しいセットを作成することです。 person.idを読むのと同じように、person.firstNameを読むことができます。ただし、この関数はpeopleオブジェクトをまったく変更しないため、他のコード（IDプロパティが存在しないことに依存している可能性があります）は影響を受けません。

1
Steve Cooper

Handlebars.jsを使用してから、

Handlebars.registerHelper("inc", function (value, options) {
    return parseInt(value) + 1;
});

HTMLで使用するには

{{inc @@index}}
0
Elaine