Jquery 模板 - 嵌套 JSON（唯一键名）

发布于 2024-12-04 01:31:06 字数 1331 浏览 1 评论 0原文

浏览一下这个 JSON。是的，它嵌套得像地狱一样。我需要将其嵌套以保持数据层次结构。

来自 firebug 控制台的 JSON

我的问题是键不是通用的（由于 C# 字典键不能相同）。它们根据数据而变化。到目前为止，我的模板如下所示：

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

如您所见，我想访问 $data 中的 json。 $data 的值包含 JSON，但我不知道访问它的语法..并且在每个 $data 的值中还有 also JSON。

我该怎么做？

注意：

这是我的 jQuery 代码：

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

$.tmpl("ctmpl", jsonobject).appendTo("#客户容器”);

原文

Glance this JSON for a sec. Yes, it's nested like hell. And I need it to be nested to keep the data-hierarchy.

JSON from firebug console

My problem is that the keys are not generic (due to C# Dictionary keys can't be the same). They vary depending on the data. My template looks like this so far:

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

As you see, I want to access the json within $data. $data's value contains JSON, but I don't know the syntax to access that.. and inside each $data's value there's also JSON.

How can I do this?

Note:

This is my jQuery code:

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遥远的绿洲 2024-12-11 01:31:06

您可以使用如下语法：{{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 /

You can use a syntax like this: {{each(index, value) array}} to have a clear idea of the index/value of what you are looping on. {{each}} can iterate through properties on an object as well.

So, if you had data like this:

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

You could write a template like this:

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

Sample here: http://jsfiddle.net/rniemeyer/8PLGP/

回复收藏 0 原文

~没有更多了~