0

jquery テンプレートに json を追加しようとしています。現在、コードは正常に動作しています。ただし、.click が発生した場合でも、json から一度に 1 つのスライドのみを表示したいと思います。

コードは次のとおりです。

<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 テンプレートのより良いコードをどのように実装すればよいでしょうか?

4

1 に答える 1

0

最善の方法は、一度に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');                   

  }
于 2013-01-22T19:10:03.720 に答える