javascript - 使用 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

我对您的 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 stringify 输出正确对象的内容。输出的内容当然可以更改，这只是为了表明选择了正确的对象。
• .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 的内容，并将其保存在数据中。然后我们将html的内容放入带有预览类的div中，因为我们已经根据模板脚本对其进行了格式化。

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

  });//getJSON

接下来我们将创建一个名为 lookup 的数组，它只包含来 self 们的 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 中

最后我们关闭文档。准备就绪。

尝试点击一个名字(可以是名字或姓氏)。我们当然可以将相关对象中的任何内容放在其他任何地方。例如:删除线

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

并将其替换为

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

现在点击一个名字会弹出一个窗口，说明他们的全名和他们正在学习的专业。