使用 Jquery 模板的 json 动态输出答案

【问题标题】：json dynamic output with Jquery Template使用 Jquery 模板的 json 动态输出
【发布时间】：2013-01-22 18:53:59
【问题描述】：

我正在尝试将一些 json 附加到 jquery 模板中。现在，代码工作正常。但是，当 .click 甚至发生时，我想一次只从我的 json 中显示一张幻灯片。

代码如下：

<head>
<style type="text/css"></style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta/jquery.tmpl.min.js"></script>
<script id="ititemplate" type="text/x-jquery-tmpl">

        <h1>${title}</h1>
        <div>${author}</div>

            <ol>{{each slides}}
            <figure style="${css}">

                <h2 style="${headcss}">${header}</h2>
                <p style="">${Slide}</p>
                <img style="${imagecss}" width="${width}" height="${height}" src="${imagesrc}"></img>
            <ol>
                {{each Content}}
                <li style="${contcss}">${bullet}</li>
            {{/each}}</ol>

            </figure>
            {{/each}}</ol>

    </script>

<script type="text/javascript">
    $(document).ready(function() {
    $('#myppt').click(function() {
        //var jsonloc = "ppt.json";
            $.when($.getJSON('ppt.json') ).then(function(info){
            $('#header').empty();
            $('#ititemplate').tmpl(info).appendTo('#header');                   
                });                                 
            }); 

});             

</script>
</head>
<body>
<a href="#" id="myppt">My Powerpoint presentation </a>
<div id="header">
</div>
</body>

这是 JSON：

{
"title": "The ppt presenation",
    "date_created": "9242010",
    "last_modified": "9242011",
    "author": "Mistic Frenzies",
    "slides": [
                 {
    "Slide": "1",
        "header": "My life",
        "headcss": "text-align: center",
        "imagesrc": "cool.jpg",
    "imagecss": "{float:right}",
    "width": "100px;",
    "height": "100px;",
    "contcss":"{background-color:#97FB98; border-bottom: thin dotted #888888;}",
    "Content": [{
        "bullet": ""
    }, {
        "bullet": ""
    }, {
        "bullet": ""
    }, {
        "bullet": ""
    }, {
        "bullet": ""
    }]
}, {
    "Slide": "2",
        "header": "Early Stages",
        "headcss": "text-align: center",
        "imagesrc": "cool.jpg",
    "imagecss": "{float:right}",
    "width": "100px;",
    "height": "100px;",
    "contcss":"{background-color:#97FB98; border-bottom: thin dotted #888888;}",
    "Content": [{
        "bullet": ""
    }, {
        "bullet": ""
    }, {
        "bullet": ""
    }, {
        "bullet": ""
    }, {
        "bullet": ""
    }]
}, {
    "Slide": 3,
        "header": "Crazy Teenager",
        "headcss": "text-align: center",
        "imagesrc": "cool.jpg",
    "imagecss": "{float:right}",
    "width": "100px;",
    "height": "100px;",
    "contcss":"{background-color:#97FB98; border-bottom: thin dotted #888888;}",
    "Content": [{
        "bullet": ""
    }, {
        "bullet": ""
    }, {
        "bullet": ""
    }, {
        "bullet": ""
    }, {
        "bullet": ""
    }]
}]
}

所以，我不确定如何从 JSON 的幻灯片数组中的 1 张幻灯片中获取 JSON。我应该稍微改变一下我的Json吗？或者我应该如何为 jquery 模板实现更好的代码？

【问题讨论】：

标签： jquery json templates getjson

【解决方案1】：

我认为最好的方法是使用一次显示一张幻灯片的模板（删除 each slides 等）。并更改脚本以分离从点击绑定中获取的 json。所以基本上（在伪代码中）这看起来像：

var current_slide, slides
getjson(){
  slides = results['slides'] //array with the results. all the slides from the json object
  current_slide = 0;
  display_slide(current_slide); //showing the first slide
 }
$('#myppt').click(function() { //binding the slide switching to the click
   current_slide++;
   displaySlide(current_slide);
};

function display_slide(num){ //basically just the display code, didn't check if it really works
  $('#header').empty();
  info = slides[num]
  $('#ititemplate').tmpl(info).appendTo('#header');                   

  }

【讨论】：