具有jQuery模板的多维数组 [英] Multidimensional array with jquery templates

问题描述

我有以下javascript对象：

$ $ p $ $ $ $ $ $ $ $ $ $ $ {
{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>一个< / span> 
< / div> 
< div class =cell> 
< span> 2< / span> ：< span>两个< / span> 
< / div> 
< div class =cell> 
< span> 3< / span> ：< span>三< / span> 
< / div> 
< / div> 
< div class =row> 
< div class =cell> 
< span> 4< / span> ：< span>四< / span> 
< / div> 
< div class =cell> 
< span> 5< / span> ：< span>五< / span> 
< / div> 
< div class =cell> 
< span> 6< / span> ：< span> six< / span> 
< / div> 
< / div> 
  

我使用以下模板但没有运气：（

）

 < script id =rowTemplatetype =text / x-jQuery-tmpl> 
< div class =row> 
 {{tmpl#cellTemplate}} 
< / div> 
< / script> 
< script id =cellTemplatetype =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> 
  

我在做什么错误？

解决方案

我认为问题在模板中使用了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
} 
] 
]; 
 $ b $（函数（）{
 $（＃somediv）。replaceWith（$（＃rowTemplate）。tmpl（arr））; 
}）; 
< / script> 
< script id =rowTemplatetype =text / x-jQuery-tmpl> 
< div class =row> 
 {{tmpl（$ data）#cellTemplate}} 
< / div> 
< / script> 
< script id =cellTemplatetype =text / x-jQuery-tmpl> 
< div class =cell>< span> $ {id}< / span>：< span> $ {name}< / span>< / div> 
< / script> 
< div id =somediv>< / div> 
  

I have the following javascript object

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" }
    ],
]

I'm trying to use jquery templates to create the following 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>

I am using the following templates with no luck :(

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

The line that calls the template is the following:

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

I am getting only one row with one cell with no data...

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

What am I doing wrong?

解决方案

I think the problem is with usage of replaceAll and the missing parameter to tmpl in the template. Try this(used replaceWith for #someDiv and passed $data as tmpl parameter for child template):

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

这篇关于具有jQuery模板的多维数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！