單擊項目時加載帖子詳細信息頁面

Question

我正在開發使用Framework7，Template7和JSON的應用程序。到目前爲止，我已經能夠使用WordPress JSON API插件列出來自WordPress的內容。我想加載一個詳細信息頁面，點擊下面的內容後點擊該內容即爲我的代碼。另外這裏是對代碼的鏈接codepen http://codepen.io/3MStudio/pen/WGKLZq

的index.html

<!-- Views --> 
<div class="views"> 
    <!-- View --> 
    <div class="view view-main"> 
    <!-- Pages --> 
    <div class="pages"> 
     <!-- Home page --> 
     <div class="page" data-page="index"> 
     <div class="page-content"> 
      <div class="content-block-title title">News Page</div> 
      <!-- Div for Result --> 
      <div id="content-wrap" class="list-block">Loading Please Wait</div> 
      <!-- Template7 Template --> 
      <script id="shows-template" type="text/template7"> 
      <div class="list-block media-list"> 
       <ul> 
       {{#each this.posts}} 
       <li class="item-content"> 
        <a href="#detail?id={{id}}" style="background: url({{thumbnail_images.full.url}}); center center; background-size:cover"> 
        <div class="item-inner"> 
         <p class="date">{{date}}</p> 
         <div class="item-details"> 
         <h2 class="item-title">{{title}}</h2> 
         <div class="item-discription">{{excerpt}}</div> 
         </div> 
        </div> 
        </a> 
       </li> 
       {{/each}} 
       </ul> 
      </div> 
      </script> 
     </div> 
     </div> 

     <!-- Detail page --> 
     <div class="page cached" data-page="detail"> 
     <div class="page-content"> 
      <p>Detail page</p> 
      <a href="#index" class="back"> Go back to home page </a> 
      <div id="content-wrap" class="">Loading Please Wait</div> 
      <script id="detail-template" type="text/template7"> 
      <img src="{{thumbnail_images.full.url}}" alt="{{title}}"/> 
       <p class="date">{{date}}</p> 
       <div class="item-details"> 
       <h2 class="item-title">{{title}}</h2> 
       <div class="item-discription">{{content}}</div> 
       </div> 
      </script> 
     </div> 
     </div> 

     <!-- Services page --> 
     <div class="page cached" data-page="services"> 
     <div class="page-content"> 
      <p>Services page</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

index.js

var myApp = new Framework7({ 
    externalLinks: '.external' 
}); 

// Export selectors engine 
var $$ = Dom7; 

// Cordova Initialize 
var app = { 

    initialize: function() { 
     this.bindEvents(); 
    }, 
    bindEvents: function() { 
     document.addEventListener('deviceready', this.onDeviceReady, false); 
    }, 

    onDeviceReady: function() { 
     // JScript for the main app, once PGap has loaded. 
     //checkDeviceSize(); (WILL RE-CODE IN A CSS FRIENDLY FORMAT) 
     document.addEventListener("offline", onOffline, false); 
     document.addEventListener("online", onOnline, false); 
     setTimeout(function() { 
      navigator.splashscreen.hide(); 
     }, 1000); 
    } 
}; 

var mainView = myApp.addView('.view-main', { 
    domCache: true //enable inline pages 
}); 

// Select Template 
var template = $$('#shows-template').html(); 

// Compile and render 
var compiledTemplate = Template7.compile(template); 

function getshows() { 
    $$.getJSON('http://www.maan-lagh.com/?json=get_recent_posts&callback=shows', function(json) { 
     // Insert rendered template 
     $$('#content-wrap').html(compiledTemplate(json)); 
    }); 
}; 
getshows(); 

// Select Pull to refresh content 
var ptrContent = $$('.pull-to-refresh-content'); 

// On refresh 
ptrContent.on('refresh', function(e) { 
    // Emulate 1s loading 
    setTimeout(function() { 

     // Execute getshows to get new shows 
     getshows(); 

     myApp.pullToRefreshDone(); 
    }, 1000); 
}); 

Answer 1

步驟驗證碼：

1. onclick/onselect提交使用AJAX的表單：用於選擇項目
2. 提交後數據使用您的代碼（如功能）。
3. 最後在JSON中使用重定向頁面或成功消息/或帶ID的成功消息來傳遞響應值（如echo jaso_encoder($data)）。