使用jQuery getJSON將JSON數據的嵌套對象返回到Mustache模板

Question

我在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"
            }
        ]    
    }
    }

Answer 1

一種方法是更改​​您的JSON，以使每個人都有一個布爾值(true or false) ，然后使用Mustache的模板系統，您可以檢查所有人員並僅渲染那些具有特定值true -一旦您設置了該值已收到服務器的回復。

更新：您還需要將“ people”轉換為數組，以便可以遍歷每個個人...（下面的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>