Question

我试图将一些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模板实现更好的代码？

Answer 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');                   

  }

json动态输出与Jquery模板

1 个答案: