How do I pass an object to, or set a variable in a TVML template file I am using? - apple-tv

Question

I'm working with the TVMLCatalog sample files from Apple, and am stuck trying to pass an object to a template file I am loading in the presenter (javascript file). This seems like it should be a totally rudimentary thing to accomplish, but it has me beat.
I have the following, which loads a template with the resource loader, and pushes it to the view.
resourceLoader.loadResource('http://localhost/mytemplate.xml.js',
function(resource) {
if (resource) {
var doc = self.makeDocument(resource);
doc.addEventListener("select", self.load.bind(self));
navigationDocument.pushDocument(doc);
}
}
);
Where do I define an object or set a variable that will be in the document when the template file is loaded in the view?

Answer 1

Yes! You can inject variables into your TVML templates.
First, you have to create a string that contain the same TVML template, and use ${variable} to inject values.
Then, use DOMParser object to convert this string into XML DOM element.
Finally, present the document with help of presentModal method (main object navigationDocument)
Your function will look like this:
function catalogTemplate(title, firstMovie, secMovie) {
var xmlStr = `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<catalogTemplate>
<banner>
<title>${title}</title>
</banner>
<list>
<section>
<listItemLockup>
<title>All Movies</title>
<decorationLabel>2</decorationLabel>
<relatedContent>
<grid>
<section>
<lockup>
<img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/2/2014/03/Maleficent-Poster.jpg" width="250" height="376" />
<title>${firstMovie}</title>
</lockup>
<lockup>
<img src="http://www.freedesign4.me/wp-content/gallery/posters/free-movie-film-poster-the_dark_knight_movie_poster.jpg" width="250" height="376" />
<title>${secMovie}</title>
</lockup>
</section>
</grid>
</relatedContent>
</listItemLockup>
</section>
</list>
</catalogTemplate>
</document>`
var parser = new DOMParser();
var catalogDOMElem = parser.parseFromString(xmlStr, "application/xml");
navigationDocument.presentModal(catalogDOMElem );
}
PS: I used Catalog template as an example. You can use any template
In the onLaunch function, you can call the catalogTemplate function by passing any variable.
App.onLaunch = function(options) {
catalogTemplate("title", "Maleficent.", "The Dark knight");
}
You can add a listener and pass an function to move to another page or trigger an action using addEventListener
function catalogTemplate(title, firstMovie, secMovie, cb) {
var xmlStr = `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<catalogTemplate>
<banner>
<title>${title}</title>
</banner>
<list>
<section>
<listItemLockup>
<title>All Movies</title>
<decorationLabel>2</decorationLabel>
<relatedContent>
<grid>
<section>
<lockup>
<img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/2/2014/03/Maleficent-Poster.jpg" width="250" height="376" />
<title>${firstMovie}</title>
</lockup>
<lockup>
<img src="http://www.freedesign4.me/wp-content/gallery/posters/free-movie-film-poster-the_dark_knight_movie_poster.jpg" width="250" height="376" />
<title>${secMovie}</title>
</lockup>
</section>
</grid>
</relatedContent>
</listItemLockup>
</section>
</list>
</catalogTemplate>
</document>
`
var parser = new DOMParser();
var catalogDOMElem = parser.parseFromString(xmlStr, "application/xml”);
catalogDOMElem.addEventListener("select", cb, false);
navigationDocument.presentModal(catalogDOMElem );
}
Let's create another template just to showcase how we jump to another page by selecting a specific item.
function ratingTemplate(title) {
var xmlStr = `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<ratingTemplate>
<title>${title}</title>
<ratingBadge value="0.8"></ratingBadge>
</ratingTemplate>
</document>`
var parser = new DOMParser();
var ratingDOMElem = parser.parseFromString(xmlStr,"application/xml");
navigationDocument.presentModal(ratingDOMElement);
}
In our onLaunch function.
App.onLaunch = function(options) {
catalogTemplate("title", "Maleficent.", "The Dark knight", function() {
navigationDocument.dismissModal();
ratingTemplate(“rating template title")
});
}
Check this list for more tutorials.