Динамический вывод JSON с шаблоном Jquery

Question

Динамический вывод JSON с шаблоном Jquery

Я пытаюсь добавить JSON в шаблон JQuery. Прямо сейчас код работает нормально. Тем не менее, я хотел бы отображать только один слайд из моего JSON, когда даже происходит.click.

Вот код:

<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?

0

jquery json templates getjson

Источник

user1979087 22 янв '13 в 18:53

1 ответ

Другие вопросы по тегам jquery json templates getjson

user690204 22 янв '13 в 19:10 2013-01-22 19:10 · Answer 1 · 2013-01-22 19:10

Я думаю, что лучшим способом было бы использовать шаблон, который отображает один слайд за один раз (удаляя each slides так далее). и изменение сценария, чтобы отделить выборку json от привязки щелчка. так что в основном (в коде psuedo) это будет выглядеть так:

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

  }