使用 jQuery getJSON 将 JSON 数据的嵌套对象返回到 Mustache 模板答案

【问题标题】：Returning Nested Object of JSON Data to Mustache Template Using jQuery getJSON使用 jQuery getJSON 将 JSON 数据的嵌套对象返回到 Mustache 模板
【发布时间】：2014-09-04 21:47:19
【问题描述】：

我的 HTML 下面有个人的链接，点击它应该发出一个 Ajax 请求，该请求使用特定人的正确信息填充小胡子模板。我在 JQuery 脚本中尝试做的是使用我的 HTML 中的 value 属性来识别 JSON 文件中要返回给模板的嵌套对象。在脚本中，我将其转换为变量 personIdentifier。有什么方法可以使用此变量仅将特定于人员的嵌套 JSON 返回到模板？我不确定如何做到这一点。或者，如果有比我的方法更好的整体方法来做到这一点。我希望我能正确解释这一点，请随时问我任何问题。我觉得我很接近，任何帮助将不胜感激。

<div class="clicky" value="jamie">
<a href="">Jamie Info</a>
</div>

<div class="clicky" value="dave">
<a href="">Dave Info</a>
</div>

<script id="people-template" type="text/template">
<div>{{name}}</div>
<div>{{achievements}}</div>
</script>

<script type="text/javascript">
 $(document).ready(function() {
 $('.clicky').click( function (event) {
     event.preventDefault(); //to stop from following clicked link
     var personIdentifier = $(this).attr('value');

     $.getJSON( "people.json", function( data ) {
        var template = $('#people-template').html();

        // something here to change the JSON so it 
        // only returns specific persons array/object

        var info = Mustache.to_html(template, data);
        $( ".result" ).html( info );


     });
</script>

这里是people.json文件（必要时可以改变结构）：

    { "people" : {
        "jamie" : [
            {
                "name" : "Jamie Smith",
                "achievements" : "lots of stuff"
            }
        ],
        "dave" : [
            {
                "name" : "Dave Berns",
                "achievements" : "lots of things"
            }
        ]    
    }
    }

【问题讨论】：

您是否使用 Handlebars，然后使用 Mustache 模板实现会容易得多，因为您可以使用帮助器来检查值。

标签： javascript jquery ajax json mustache

【解决方案1】：

一种方法可能是更改您的 JSON，以便每个人都有一个布尔值 (true or false)，然后使用 Mustache 的模板系统，您可以检查所有人并只呈现那些具有特定值 true 的人 - 你会收到服务器的响应后设置。

更新：您还需要将“人”转换为数组，以便它可以遍历每个人...（下面的 JSON 显示了这一点）

例如，您的 JSON 看起来像这样......

{ 
 "people" : [
    "jamie" : [
        {
            "showPerson" : false
            "name" : "Jamie Smith",
            "achievements" : "lots of stuff"
        }
    ],
    "dave" : [
        {
            "showPerson" : false
            "name" : "Dave Berns",
            "achievements" : "lots of things"
        }
    ]    
  ]
}

现在，一旦您从服务器获得响应，您将编辑 JSON，以便匹配的人将属性 showPerson 设置为 true...

"dave" : [
        {
            "showPerson" : true //You can use jQuery to easily do this...
            "name" : "Dave Berns",
            "achievements" : "lots of things"
        }
    ]

现在在您的 Mustache 模板中，您只需使用内置的 false values check，如果是 false，则不会渲染...

<script id="people-template" type="text/template">
    {{#people...showPerson}} //If "showPerson" is `false` this will not render, meaning only the individual you filtered for will display...
        <div>{{name}}</div>
        <div>{{achievements}}</div>
    {{/showPerson}}
</script>

【讨论】：