Блог

Я разрабатываю приложение, используя Framework7, Template7 и JSON. До сих пор мне удавалось отображать содержимое из WordPress с помощью плагина WordPress JSON API. Я хотел бы загрузить страницу сведений с содержимым, на которое нажимается при нажатии на элемент, ниже приведен мой код на данный момент. Также здесь есть ссылка на код в 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_postsamp;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);
});
 

шаги для этого кода:

1. onclick / onselect отправить форму с помощью AJAX: использовать для выбора элемента
2. после отправки данных post используйте свой код (например, функциональность).
3. и, наконец, используйте страницу перенаправления / или сообщение об успешном завершении / или сообщение об успешном завершении с идентификатором в JSON для передачи значения ответа (например echo jaso_encoder($data) ).