Both AJAX sources are behind the user auth, so I’m affraid I won’t be able to provide a working JSFiddle.
Here are some blocks of my code, if it helps:
routes.js
Library - the list of items, retreived via AJAX;
{
path: ‘/library/’,
async(to, from, resolve, reject) {
app.preloader.show();
var url2 = “https://myintranetsite.com/library/_api/web/lists/GetByTitle(‘MyList’)/items?$select=Id,Title,File/ServerRelativeUrl,RevisionNo,RevisionDate&$expand=File&$top=20”;
app.request( {
url: url2,
dataType: ‘json’,
type: “get”,
crossDomain: true,
headers: { “Accept”: “application/json; odata=verbose” },
statusCode: {
404: function(xhr) {
console.log(‘page not found’);
}
},
complete: function() {
console.log(‘complete’);
},
success: function(response) {
app.preloader.hide();
resolve(
{
componentUrl: ‘./pages/library.html’,
},
{
context: {
products: response.d.results,
},
}
);
},
error: function() {
console.log(‘error’);
}
});
},
}
View-document - the component to view the item, with included pdf.js in iframe.
{
path: ‘/view-document/:first’,
async(to, from, resolve, reject) {
app.preloader.show();
var url2 = “https://myintranetsite.com/library/_api/web/lists/GetByTitle(‘MyList’)/items("+to.params.first+")?$select=Id,Title,File/ServerRelativeUrl&$expand=File”;
console.log("HMM "+url2)
app.request( {
url: url2,
dataType: ‘json’,
type: “get”,
crossDomain: true,
headers: { “Accept”: “application/json; odata=verbose” },
statusCode: {
404: function(xhr) {
console.log(‘page not found’);
}
},
complete: function() {
console.log(‘complete’);
},
success: function(response) {
app.preloader.hide();
resolve(
{
componentUrl: ‘./pages/view-document.html’,
},
{
context: {
documents: response.d,
},
}
);
// console.log(context)
},
error: function() {
console.log(‘error’);
}
});
},
},
Components
Library view - a list of all the items (corresponds to the first route above).
<template>
<div class="page cached" class="page" data-name="library">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="title">Library</div>
<div class="right">
<a class="link icon-only searchbar-enable" data-searchbar=".searchbar-demo">
<i class="icon f7-icons ios-only">search_strong</i>
<i class="icon material-icons md-only">search</i>
</a>
</div>
<form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-expandable searchbar-demo searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancel</span>
</div>
</form>
</div>
</div>
<div class="page-content">
<div class="searchbar-backdrop"></div>
<div class="list media-list search-list searchbar-found">
<ul>
{{#each products}}
<li>
<a href="/view-document/{{ID}}/" class="item-link item-content search-list searchbar-found">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{Title}}</div>
</div>
<div class="item-subtitle">Rev.: {{RevisionNo}} | Rev.date: {{formatdate RevisionDate}}</div>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
</div>
<div class="list simple-list searchbar-not-found">
<ul>
<li>Nothing found</li>
</ul>
</div>
</div>
</template>
Document view (with pdf.js in iFrame).
Tapping “Back” from this view, results into blank list view of previous component above.
<template>
<div class="page" data-name="library">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">{{documents.Title}}</div>
</div>
</div>
<div class="pages">
<div class="page" data-page="pdfviewer">
<div class="page-content">
<div id="container">
<iframe id="theFrame" src="/test/f1/web/viewer.html?file=https://myintranetsite.com{{documents.File.ServerRelativeUrl}}" style="width:100%;height:100%;"></iframe>
</div>
</div>
</div>
</div>
</div>
</template>
<style>
#container { overflow: auto; -webkit-overflow-scrolling: touch; height: 100%; }
</style>