Last active
July 31, 2018 22:06
-
-
Save mlcollard/de91553bd410c9aaf800361630b15475 to your computer and use it in GitHub Desktop.
iOS: TVML: Json binding
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var baseURL = "http://localhost:9001/" | |
function getDocument(url) { | |
var templateXHR = new XMLHttpRequest(); | |
templateXHR.responseType = "document"; | |
templateXHR.addEventListener("load", function() { pushDoc(templateXHR.responseXML);}, false); | |
templateXHR.open("GET", baseURL + url, true); | |
templateXHR.send(); | |
} | |
function getDocumentJson(url) { | |
var templateXHR = new XMLHttpRequest(); | |
templateXHR.responseType = "document"; | |
templateXHR.addEventListener("load", function() { parseJson(templateXHR.responseText);}, false); | |
templateXHR.open("GET", baseURL + url, true); | |
templateXHR.send(); | |
} | |
function pushDoc(document) { | |
navigationDocument.pushDocument(document); | |
} | |
function loadingDoc() { | |
var template = ` | |
<document> | |
<loadingTemplate> | |
<activityIndicator><text>Loading</text></activityIndicator> | |
</loadingTemplate> | |
</document> | |
`; | |
var templateParser = new DOMParser(); | |
var parsedTemplate = templateParser.parseFromString(template, "application/xml"); | |
navigationDocument.pushDocument(parsedTemplate); | |
} | |
function parseJson(information) { | |
// setup the page | |
var results = JSON.parse(information); | |
let parsedTemplate = templateDocument() | |
navigationDocument.pushDocument(parsedTemplate) | |
let shelf = parsedTemplate.getElementsByTagName("shelf").item(0) | |
let section = shelf.getElementsByTagName("section").item(0) | |
// create an empty data item for the section | |
section.dataItem = new DataItem() | |
// create data items from objects | |
let newItems = results.map((result) => { | |
let objectItem = new DataItem(result.type, result.ID); | |
objectItem.url = baseURL + result.url; | |
objectItem.title = result.title; | |
return objectItem; | |
}); | |
// add the data items to the section's data item; 'images' relates to the binding name in the protoype where items:{images} is all of the newItems being added to the sections' data item; | |
section.dataItem.setPropertyPath("images", newItems) | |
} | |
function templateDocument() { | |
let template = `<?xml version="1.0" encoding="UTF-8" ?> | |
<document> | |
<stackTemplate> | |
<banner><title>Mascots</title></banner> | |
<collectionList><shelf> | |
<prototypes> | |
<lockup prototype="artwork"> | |
<img binding="@src:{url};" width="200" height="300"/> | |
<title binding="textContent:{title};" /> | |
</lockup> | |
</prototypes> | |
<section binding="items:{images};" /> | |
</shelf></collectionList> | |
</stackTemplate> | |
</document>`; | |
return new DOMParser().parseFromString(template, "application/xml"); | |
} | |
App.onLaunch = function(options) { | |
loadingDoc() | |
var templateURL = "data/images.json"; | |
getDocumentJson(templateURL); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is it possible to bind to repeat the shelf node and also use a header? Say for data something like: