javascript - 单击某个项目后加载帖子详细信息页面

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))。