28

オブジェクトの配列を 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}}) ください。おそらく現在の配列インデックスを格納する組み込み変数はありますか?

更新テンプレート項目に配列インデックスを公開することを提案するチケット を作成しましたが、無効としてクローズされました...

4

8 に答える 8

28

まあ、それは真の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。

于 2010-11-02T20:54:54.720 に答える
3

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

${ _index === undefined && _index = 0, '' }
<strong>Item ${ index }:</strong> ${ content }
${ _index++, '' }
于 2011-03-23T05:17:39.150 に答える
2

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

于 2012-10-16T03:13:46.103 に答える
2

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

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

しかし、関数からアクセスしようとすると、テンプレート内から呼び出します:

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

関数で、「item.key」または「$(item).key」のようなアイテムキープロパティをチェックすると、実際の値ではなく「未定義」になります...

于 2011-03-01T18:44:01.727 に答える
1

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

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

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

トリックを行います！

于 2012-03-14T21:38:23.057 に答える
1

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

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

<script id=”tabTemplate” type=”text/x-jquery-tmpl”&gt;
    <div id=“tab-${$index + 1}”&gt;
        <!— render tab contents here… —&gt;
    </div>
</script>
于 2012-01-12T17:42:06.367 に答える
0

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

var n = 0;
function outputTemplate(){
    return $( "#template_item" ).tmpl(datas,
          {
              getEvenOrOdd: function(){
                  return ++n % 2 == 0 ? 'odd' : 'even';
              }
          } 
    );
}
于 2013-02-17T23:25:23.900 に答える
0

簡単にアクセスできる索引はありません。各項目に追加されるキーがあります。

<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 が生成されます。

ですから、あなたの質問への答えは.....いいえです。

于 2010-10-19T15:10:26.153 に答える