Шаблоны Jquery - вложенный JSON (уникальные имена ключей) - PullRequest
Новая
       12

Шаблоны Jquery - вложенный JSON (уникальные имена ключей)

5 голосов
/ 12 сентября 2011

Посмотрите на этот JSON на секунду. Да, это как ад. И мне нужно, чтобы он был вложенным, чтобы сохранить иерархию данных.

JSON from firebug console

Моя проблема в том, что ключи не являются общими (из-за того, что ключи C # Dictionary не могут быть одинаковыми). Они варьируются в зависимости от данных. Мой шаблон выглядит так: 

<script id="customerTemplate" type="text/x-jQuery-tmpl">
        {{each $data}}
            <div class="Customer">
                <input class="CustomerId" type="hidden" value="${ $index }" />
                <div class="CustomerHeader">
                    <div class="NameAndCheckbox">
                        <input type="checkbox" checked="checked" class="CustomerCheckbox" />
                        <span class="HeadlineText">${ $index }</span>
                    </div>
                </div>
                <div class="CustomerProjectWrapper">

                    /* HOW TO ACCESS DATA WITHIN $data */
                </div>
            </div>
        {{/each}}
    </script>

Как видите, я хочу получить доступ к json в $data. Значение $data содержит JSON, но я не знаю синтаксис для доступа к нему .. и внутри каждого значения $data есть также JSON.

Как я могу это сделать?

Примечание:

Это мой код jQuery:

$.template("ctmpl", $("#customerTemplate"));

$.tmpl("ctmpl", jsonobject).appendTo("#CustomerContainer");

1 Ответ

9 голосов
/ 13 сентября 2011

Вы можете использовать синтаксис, подобный следующему: {{each(index, value) array}}, чтобы иметь четкое представление об индексе / значении того, на что вы зацикливаетесь.{{each}} также может перебирать свойства объекта.

Итак, если бы у вас были такие данные: 

var data = {
    testA: {
        testA1: {
            testA1A: "blahA1A",
            testA1B: "blahA1B" 
        },
        testA2: {
            testA2A: "blahA2A",
            testA2B: "blahA2B"  
        }
    },
    testB: {
        testB1: {
            testB1A: "blahB1A",
            testB1B: "blahB1B" 
        },
        testB2: {
            testB2A: "blahB2A",
            testB2B: "blahB2B" 
        },
    }
};

Вы могли бы написать такой шаблон: 

<script id="contentTmpl" type="text/html">
    <ul>
    {{each(i, item) $data}}
        <li>${i}</li>
        <ul>
        {{each(j, subItem) item}}
            <li>${j}</li>    
            <ul>
            {{each(k, subSubItem) subItem}}
                <li>${k} = ${subSubItem}</li>
            {{/each}}
            </ul>
        {{/each}}
        </ul>
    {{/each}}
    </ul>
</script>

Пример здесь: http://jsfiddle.net/rniemeyer/8PLGP/

...