web-dev-qa-db-ja.com

jQueryテンプレート内で現在のアイテムインデックスを取得する最も簡単な方法

オブジェクトの配列をjQueryテンプレート（公式のjquery-tmplプラグイン）に渡します：

$("#itemTmpl").tmpl(items).appendTo("body");

<script id="itemTmpl" type="text/x-jquery-tmpl">
    <div class="item">Name: ${name}, Index: ${???}</div>
</script>

テンプレートにアイテムインデックスを表示する最も簡単な方法は何ですか？分離された外部関数を使用せず、渡されたオブジェクト構造を変更せず、テンプレート構造を変更しない（{{each}}に変換する）ことが望ましい。おそらく現在の配列インデックスを格納する組み込み変数はありますか？

[〜＃〜] update [〜＃〜]作成しました チケット 配列インデックスをテンプレートアイテムに公開することを提案しましたが、無効としてクローズされました...

jqueryjquery-templates
28
serg

ええと、それはtrue個別の外部関数ではありませんが、optionsに渡すことができるtmplオブジェクトに関数をスラップすることができます。私は次のことをしました、そしてそれはうまく働きます：

$("#templateToRender").tmpl(jsonData,
  {
    dataArrayIndex: function (item) {
      return $.inArray(item, jsonData);
    }
  });

テンプレートでは、$itemオブジェクトから関数にアクセスできます。

<script id="templateToRender" type="text/x-jquery-tmpl">
  <li>
    Info # ${$item.dataArrayIndex($item.data)}
  </li>
</script>

または、$item.dataを関数に渡す代わりに、関数のコンテキストはテンプレートのtmplItemオブジェクト（$ item.dataと同じ）です。したがって、dataArrayIndexをパラメータなしで記述し、this.dataを介してデータにアクセスできます。

28
kdawg

これが安っぽいハックです：

${ _index === undefined && _index = 0, '' }
<strong>Item ${ index }:</strong> ${ content }
${ _index++, '' }
3
a paid nerd

Javascriptで関数を作成して、カウンターをインクリメントします。次に、JavaScriptで関数を作成して、カウンターの現在の位置を取得します。これらの関数は、{{ functionName() }}を使用して呼び出すことができます。以前は、非表示の入力タグなど、html要素でこの関数を使用していました。これにより、インデックスを使用できるようになります。

2
user1748815

自分でこの問題に遭遇しただけです。とてもイライラします！たとえば、テンプレートアイテムのインデックスは、jTemplatesで常に利用可能でした。それを追加するのは難しいはずではなかったと思います...

奇妙なことに、Firebugでは各$ itemのキープロパティを確認できます。 item key

しかし、テンプレート内から呼び出す関数からアクセスしようとすると、次のようになります。

<img class="profImage" src="${getProfileImage($item)}" />

関数で、「item.key」や「$（item）.key」のようなアイテムキープロパティをチェックすると、実際の値ではなく「undefined」が表示されます。

2
poeticGeek

少なくともjQuery1.6.4以降を使用してこれを行う簡単な方法。

まず、コレクションを反復処理することを期待します

{{each myListofStuff}}
Index: ${$this.index}
{{/each}}

トリックを行います！

1
bobber205

https://github.com/clarkbox/jquery-tmpl/commit/993e6fa128c5991723316032abe12ff0cbbb9805

Jquery.templateにパッチを適用すると、次のように実行できます。

<script id=”tabTemplate” type=”text/x-jquery-tmpl”>
    <div id=“tab-${$index + 1}”>
        <!— render tab contents here… —>
    </div>
</script>
1
v.tsurka

簡単にアクセスできるインデックスはありません。各アイテムに追加されるキーがあります。

_<div class="item" jQuery1287500528620="1">
_

このキーにはjqueryからアクセスできます。だからあなたは次のようなことをすることができます

_$(".item").each(function () {
                var theTemplate = $(this).tmplItem();
                $(this).append("Index: " + theTemplate.key);
            });
_

しかし、それはあなたが望んでいたことではありません。私はあなたが望んでいたことが可能だとは思いません。 $ {$ item}オブジェクトはtmplItem（）メソッドを表すことになっていますが、_${$item.key}._の値を提供しません。${$.tmplItem().key}を使用すると、各行に0が生成されます。

だからあなたの質問への答えは.....いいえ。

0
Tom B

カウントするグローバル変数を1つ定義するだけです。

var n = 0;
function outputTemplate(){
    return $( "#template_item" ).tmpl(datas,
          {
              getEvenOrOdd: function(){
                  return ++n % 2 == 0 ? 'odd' : 'even';
              }
          } 
    );
}
0
Capitaine