0

私はJavaScript配列を持っています:

var personDetails = [
{firstName: "Anup", lastName: "Vasudeva", City: "Delhi"},
{firstName: "Vikas", lastName: "Kumar", City: "Banglore"},
{firstName: "Dannis", lastName: "Richie", City: "Texas"},
{firstName: "Ajay", lastName: "Sharma", City: "Pune"},
{firstName: "Deepak", lastName: "Aggarwal", City: "Delhi"},
{firstName: "Ajay", lastName: "Sharma", City: "Banglore"}

]

これが私がデザインしようとしているテンプレートです:

<div class="left">
     <!-- Should display the first half of the rows -->
     {{tmpl($data) "#someTemplate"}}
</div>
<div class="right">
    <!-- Should display the rest half of the rows -->
    {{tmpl($data) "#personTemplate"}}   
</div>

<script id="personTemplate" type="text/x-jquery-tmpl">
{{each personDetails}}
    <div class="person">
        <div>${firstName}</div>
        <div>${lastName}</div>
        <div>${city}</div>
    </div>
{{/each}}

行の前半を含み、行の後半を含むように配列を操作するにはどうすればよいですか。

編集:実際には、ユーザーは配列をそのまま渡し、配列を2つの等しい半分にスライスするのはテンプレートロジックです。

読んでくれてありがとう。

4

2 に答える 2

0

Array.sliceを使用して、入力を半分に分割します。

var input = [
    {firstName: "Anup", lastName: "Vasudeva", City: "Delhi"},
    {firstName: "Vikas", lastName: "Kumar", City: "Banglore"},
    {firstName: "Dannis", lastName: "Richie", City: "Texas"},
    {firstName: "Ajay", lastName: "Sharma", City: "Pune"},
    {firstName: "Deepak", lastName: "Aggarwal", City: "Delhi"},
    {firstName: "Ajay", lastName: "Sharma", City: "Banglore"}
];

var half_point = Math.floor(input.length / 2);
var first_half  = input.slice(0, half_point);
var second_half = input.slice(half_point+1)

console.log(first_half, second_half)

アップデート

テンプレート自体でそれを行う理由がわかりません。Arrayオブジェクトにメソッドを追加して、このロジックをデータの隣に移動することをお勧めします。

Array.prototype.chunk = function(chunk_count, chunk_no) {
    var chunk_size = Math.floor(this.length / chunk_count);
    return this.slice(chunk_no * chunk_size, chunk_size + chunk_no * chunk_size);
}

...そして、次のようにテンプレートの each メソッドから呼び出します。

<script id="personTemplate" type="text/x-jquery-tmpl">
<div class="left">
    {{each data.chunk(2, 0)}}
    <div class="person">
        <div>${firstName}</div>
        <div>${lastName}</div>
        <div>${city}</div>
    </div>
    {{/each}}
</div>
<div class="right">
    {{each data.chunk(2, 1)}}
    <div class="person">
        <div>${firstName}</div>
        <div>${lastName}</div>
        <div>${city}</div>
    </div>
    {{/each}}
</div>
</script>

コア クラスの拡張 (他のサークルでは「モンキーパッチ」) が良いかどうかは議論の余地があります。同じ関数をinput変数に直接追加することもできます。ただし、レンダリングの前にテンプレートに割り当てられた 2 つの個別の変数を使用すると、驚きが少なくなるため、これよりも有利になる可能性があります。

于 2012-08-29T06:12:37.230 に答える
0

このようにデータを操作するためにテンプレートを使用しないでください。ユーザー指定の配列をテンプレートに提供する前に、外部で実行してください。これを行いたくない理由は、そのようなロジックを処理するためにテンプレートを使用すると、外部で処理するよりもはるかに遅くなるためです。これは、10 ～ 20 個のアイテムの配列では目立ちませんが、何らかの理由で配列が大きくなると、テンプレート化が著しく遅くなります。

于 2012-08-29T06:25:53.093 に答える