[英]Returning Nested Object of JSON Data to Mustache Template Using jQuery getJSON
I have links for individual people below in my HTML and on click it should make an Ajax request that populates a mustache template with the correct info for the specific person. 我在HTML的下面有个人链接,单击该链接时,它应该发出Ajax请求,并使用特定人的正确信息填充胡须模板。 What I am trying to do in the JQuery script is use the value attribute in my HTML to identify a nested object within the JSON File to be returned to the template.
我要在JQuery脚本中尝试做的是使用HTML中的value属性来标识要返回模板的JSON文件中的嵌套对象。 In the script I have turned this into the variable personIdentifier.
在脚本中,我将其变成了变量personIdentifier。 Is there any way to use this variable to return only the person specific nested JSON to the template?
有什么方法可以使用此变量将仅特定于人员的嵌套JSON返回到模板? I am not sure how this could be done.
我不确定如何做到这一点。 Or if there is an overall better way to do this than my approach.
或者,是否有比我的方法更好的整体方法。 I hope I am explaining this correctly, please feel free to ask me any questions.
希望我能正确解释,请随时问我任何问题。 I feel I am so close, any help would be greatly appreciated.
我觉得我是如此亲密,任何帮助将不胜感激。
<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>
Here is the people.json file (structure can be changed if necessary): 这是people.json文件(如有必要,可以更改结构):
{ "people" : {
"jamie" : [
{
"name" : "Jamie Smith",
"achievements" : "lots of stuff"
}
],
"dave" : [
{
"name" : "Dave Berns",
"achievements" : "lots of things"
}
]
}
}
One method could be to change your JSON so that each person has a boolean (true or false)
value, then using Mustache's templating system you could check all the people and render only those who have the specific value true
- which you would set once you have received your response from the server. 一种方法是更改您的JSON,以使每个人都有一个布尔值
(true or false)
,然后使用Mustache的模板系统,您可以检查所有人员并仅渲染那些具有特定值true
-一旦您设置了该值已收到服务器的回复。
UPDATE : You will also need to turn "people" into an array so that it can iterate over each of the individual people... (the JSON below shows this) 更新:您还需要将“ people”转换为数组,以便可以遍历每个个人...(下面的JSON显示了这一点)
So for example your JSON would look like this... 例如,您的JSON看起来像这样...
{
"people" : [
"jamie" : [
{
"showPerson" : false
"name" : "Jamie Smith",
"achievements" : "lots of stuff"
}
],
"dave" : [
{
"showPerson" : false
"name" : "Dave Berns",
"achievements" : "lots of things"
}
]
]
}
Now once you get your response from the server you would edit the JSON so that the matching person has the property showPerson
set to true... 现在,一旦您从服务器获得响应,就可以编辑JSON,以便匹配的人将
showPerson
属性设置为true ...
"dave" : [
{
"showPerson" : true //You can use jQuery to easily do this...
"name" : "Dave Berns",
"achievements" : "lots of things"
}
]
Now in your Mustache template you would simply have to use the built in false values
check , if it is false
then it won't render... 现在在您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.