使用AJAX将内容加载到jQuery UI对话框

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> 

配置文件预览显示来自JSON信息的选择信息，例如first_name ， last_name等。

这是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"
}
]
}

但是，当单击其中一个预览时，我想制作一个jQuery UI对话框模式弹出窗口，其中包含JSON数据中的所有信息（而不仅仅是预览中显示的数据）。

我的问题是如何获得有关单击了哪个概要文件预览的引用，以便知道在JSON文件中的哪个位置可以获取其余信息。

Answer 1

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

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

Answer 2

我对您的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-full使用JSON字符串化输出正确对象的内容的位置。 获取输出的内容当然可以更改，这只是表明已选择正确的对象。
• .preview生成预览配置文件的位置。

我还添加了开始和结束{{#profiles}} {{/ profiles}}

配置文件是根据json开头设置的内容得出的。

"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);

在document.ready速记之后，我们获取data.json的内容，并将其保存在data中。 然后，我们将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中相对于该索引的任何值。 在此示例中，我们只是将相关对象的所有字符串化内容放入我们的全配置文件div中

最后，我们关闭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');

现在单击一个名称将会弹出，说明他们的全名以及他们正在研究哪个专业。