带有 jquery 模板的多维数组

Question

我有以下 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");

我只得到一行一个没有数据的单元格...

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

我究竟做错了什么？

Answer 1

我认为问题在于使用 replaceAll 和模板中 tmpl 的缺失参数。试试这个（为#someDiv 使用 replaceWith 并传递 $data 作为子模板的 tmpl 参数）：

<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>