使用AJAX来加载内容的jQuery用户界面对话框

Question

我的网站上，我正在通过一个mustache.js模板运行JSON数据生成一堆轮廓初显。

这里是模板：

<script id="profile-preview-template" type="text/template"> 
    <div class="col-sm-3"> 
     <a style="display:block"> 
      <div class="profile-preview"> 
       <img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" /> 
       <h1>{{first_name}} {{last_name}}</h1> 
       <h2 class="text-muted">{{major}}</h2> 
       <h3 class="text-muted">Cohort {{cohort}}</h3> 
      </div> 
     </a> 
    </div> 
</script> 

配置文件预览显示了类似first_name，last_name的JSON信息选择信息等

这里的JSON数据的格式：

{ 
"profiles": [ 
{ 
    "first_name": "Robert", 
    "last_name": "Hosking", 
    "img_url": "img/about/hackbert.jpg", 
    "major": "Computer Science", 
    "cohort": 12, 
    "bio": "some info", 
    "linkedin": "some url", 
    "home_town": "some place", 
    "status": "Student" 
}, 
{ 
    "first_name": "Jimmy", 
    "last_name": "Harval", 
    "img_url": "img/about/hackbert.jpg", 
    "major": "Chemistry", 
    "cohort": 13, 
    "bio": "some info", 
    "linkedin": "some url", 
    "home_town": "some place", 
    "status": "Student" 
} 
] 
} 

然而，当其中一个预览被点击时，我想创建一个包含JSON数据中所有信息的jQuery UI对话框模式弹出窗口（不是只是预览中显示的数据）。

我的问题是如何得到哪个被点击预览轮廓的参考，所以我知道在JSON文件看拿到的其余信息。

Answer 1

我做你的HTML和模板脚本一些细微的变化。

<div class="profile-full"></div> 
<div class="preview"></div> 
<script id="profile-preview-template" type="text/template"> 
    <div class="col-sm-3"> 
     <a style="display:block"> 
      <div class="profile-preview"> 
       {{#profiles}} 
       <img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" /> 
       <h1 id="whichProfile">{{first_name}} {{last_name}}</h1> 
       <h2 class="text-muted">{{major}}</h2> 
       <h3 class="text-muted">Cohort {{cohort}}</h3> 
       {{/profiles}} 
      </div> 
     </a> 
    </div> 
</script> 

正如你可以看到，2个div的用于演示目的。

• 的.profile全凡正确对象的内容是使用JSON字符串化输出。什么得到输出当然可以改变，这只是表明选择了正确的对象。
• .preview在其中生成预览文件。

我还添加了

配置文件从什么是你的JSON年初设定衍生开闭{{#profiles}} {{/型材}}。

"profiles": [ 

我们假设你已经正确链接了jQuery和mustache.js库。将您的json文件命名为data.json 您还必须链接下面的.js文件。我已经命名为main.js。

$(function() { 

    $.getJSON('data.json', function(data) { 
    var template = $('#profile-preview-template').html(); 
     var html = Mustache.to_html(template, data); 
    $('.preview').html(html); 

    allProfiles = data.profiles; 
    lookup = []; 
    for(i=0;i<data.profiles.length;i++) { 
     lookup.push(data.profiles[i].last_name); 
    }; 

    });//getJSON 

    $(document).on('click', '#whichProfile', function() { 
    var whichName = $(this).text().substr($(this).text().indexOf(" ") + 1); 
    var i = jQuery.inArray(whichName, lookup); 
    $('.profile-full').html(JSON.stringify(allProfiles[i])); 
    }); 

});//document ready 

那么这里发生了什么？

$(function() { 

    $.getJSON('data.json', function(data) { 
    var template = $('#profile-preview-template').html(); 
     var html = Mustache.to_html(template, data); 
    $('.preview').html(html); 

我们的文件后。准备好速记，我们获取data.json的内容，并将其保存在数据中。然后我们用预览类将html的内容放入div中，因为我们已根据模板脚本对其进行格式化。

allProfiles = data.profiles; 
    lookup = []; 
    for(i=0;i<data.profiles.length;i++) { 
     lookup.push(data.profiles[i].last_name); 
    }; 

    });//getJSON 

接下来我们将创建一个名为lookup的数组，其中只包含来自我们json的last_name数据。这将使得获得关于单击哪个概要文件预览的参考成为可能并且快速。 如果你只有几个名字，使用姓氏是好的，但如果配置文件的数量增加（因此不会发生重叠的姓氏），使用唯一的标识符。考虑添加一个唯一的ID或电子邮件到您的json.data。

然后关闭你的getJSON。

$(document).on('click', '#whichProfile', function() { 
    var whichName = $(this).text().substr($(this).text().indexOf(" ") + 1); 
    var i = jQuery.inArray(whichName, lookup); 
    $('.profile-full').html(JSON.stringify(allProfiles[i])); 
    }); 

});//document ready 

这里点击一个名字就会得到我们页面上的.text文件。我们会将其转换为只有姓氏（剥离空间前的所有内容）。 然后我们在查找数组中搜索这个姓氏并返回它的索引。现在我们有了这个索引，我们可以使用它来获取json中相对于索引的任何值。在这个例子中，我们只是将相关对象的全部字符串化内容放入我们的配置文件中 - 最后，我们关闭我们的document.ready。

尝试点击名称（可以是名字或姓氏）。我们当然可以在其他地方放置任何相关对象。例如： 删除行

$('.profile-full').html(JSON.stringify(allProfiles[i])); 

与

alert(allProfiles[i].first_name + ' ' + allProfiles[i].last_name + 
    ' is studying ' + allProfiles[i].major + ' as their Major'); 

现在点击一个名字会得到一个弹出，说明他们的全名和主要他们正在研究代替它。

Answer 2

在您的模板中，为每个<a>元素指定一个id属性，该属性等于JSON数组中相应配置文件的索引。

然后，您可以给<a>元素设置一个onclick方法，如foo(this)，因为this会将元素传递给该函数。在您的功能中，您可以使用$(elem).attr("id")来检索ID，其中elem是函数参数。现在您已拥有配置文件的索引，因此应该很容易检索配置文件的信息。