2

次のJavaScriptオブジェクトがあります

var arr = [
    [
        { "id": 1, "name": "one" },
        { "id": 2, "name": "two" },
        { "id": 3, "name": "three" }
    ],
    [
        { "id": 4, "name": "four" },
        { "id": 5, "name": "five" },
        { "id": 6, "name": "six" }
    ],
]

jquery テンプレートを使用して次の HTML を作成しようとしています

<div class="row">
    <div class="cell">
        <span>1</span> : <span>one</span>
    </div>
    <div class="cell">
        <span>2</span> : <span>two</span>
    </div>
    <div class="cell">
        <span>3</span> : <span>three</span>
    </div>
</div>
<div class="row">
    <div class="cell">
        <span>4</span> : <span>four</span>
    </div>
    <div class="cell">
        <span>5</span> : <span>five</span>
    </div>
    <div class="cell">
        <span>6</span> : <span>six</span>
    </div>
</div>

私は運が悪い次のテンプレートを使用しています:(

<script id="rowTemplate" type="text/x-jQuery-tmpl">
    <div class="row">
        {{tmpl "#cellTemplate"}}
    </div>
</script>
<script id="cellTemplate" type="text/x-jQuery-tmpl">
    <div class="cell">
        <span>${id}</span> : <span>${name}</span>
    </div>
</script>

テンプレートを呼び出す行は次のとおりです。

$("#rowTemplate").tmpl(arr).replaceAll("#somediv");

データのない1つのセルで1行しか得られません...

<div class="row">
    <div class="cell">
        <span></span> : <span></span>
    </div>
</div>

私は何を間違っていますか？

4

1 に答える 1

5

問題は、replaceAll の使用と、テンプレートの tmpl へのパラメーターの欠落にあると思います。これを試してください（ #someDiv に replaceWith を使用し、子テンプレートの tmpl パラメータとして $data を渡しました）：

<script type="text/javascript">  
    var arr = 
    [
        [
            {
                    "id": 1,
                    "name": "one"
            },
            {
                    "id": 2,
                    "name": "two"
            },
            {
                    "id": 3,
                    "name": "three"
            }
        ],
        [
            {
                    "id": 4,
                    "name": "four"
            },
            {
                    "id": 5,
                    "name": "five"
            },
            {
                    "id": 6,
                    "name": "six"
            }
        ]
    ];

    $(function(){
         $("#somediv").replaceWith($("#rowTemplate").tmpl(arr)); 
    });
</script>    
<script id="rowTemplate" type="text/x-jQuery-tmpl">
            <div class="row">
                {{tmpl($data) "#cellTemplate"}}
            </div>
</script>
<script id="cellTemplate" type="text/x-jQuery-tmpl">
        <div class = "cell"><span>${id}</span>:<span>${name}</span></div>
</script>   
<div id="somediv"></div>
于 2011-01-22T01:47:40.240 に答える