Многомерный массив с шаблонами jquery - PullRequest
Новая
       25

Многомерный массив с шаблонами jquery

2 голосов
/ 22 января 2011

У меня есть следующий объект 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>

Что я делаю не так?

1 Ответ

4 голосов
/ 22 января 2011

Я думаю, что проблема связана с использованием replaceAll и отсутствующим параметром для tmpl в шаблоне.Попробуйте это (использовал replaceWith для #someDiv и передали $ 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>
...