JSON動態輸出與JQuery模板

我想附加一些JSON到jQuery模板。現在，代碼工作正常。但是，即使發生.click，我也只想從我的json中一次只顯示一張幻燈片。JSON動態輸出與JQuery模板

下面是代碼：

<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": "" 
    }] 
}] 
}

所以，我不知道究竟是如何從1張幻燈片搶JSON我的JSON的幻燈片陣列。我應該改變我的Json嗎？或者我應該如何爲jQuery模板實現更好的代碼？

來源

2013-01-22 swaggyP

我認爲最好的方法是使用模板，一次顯示一個幻燈片（刪除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-22 19:10:03 alonisser

JSON動態輸出與JQuery模板

回答

相關問題