带有 jquery 模板的多维数组答案

【问题标题】：Multidimensional array with jquery templates带有 jquery 模板的多维数组
【发布时间】：2011-01-22 01:13:27
【问题描述】：

我有以下 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 templates 创建以下 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>

我做错了什么？

【问题讨论】：

标签： html multidimensional-array jquery-templates

【解决方案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>

【讨论】：