Display MediaItem properties into my tvml template?

Question

I am trying to make an apple tv app.

I am using this sample code from tvOS Developer library:

https://developer.apple.com/library/tvos/samplecode/TVMLAudioVideo/Introduction/Intro.html

i would like to display this data from application.js:

video.title = metadata.title;
video.subtitle = metadata.subtitle;
video.description = metadata.description;
video.artworkImageURL = metadata.artworkImageURL;

var Videos = {
    video: [{
        title: "AV BipBop",
        subtitle: "Sample HLS Stream",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
        artworkImageURL: "",
        contentRatingDomain: "movie",
        contentRatingRanking: 400,
        url: "https://devimages.apple.com.edgekey.net/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8"
    }],

in my index.xml.js

 /*
    Copyright (C) 2015 Apple Inc. All Rights Reserved.
    See LICENSE.txt for this sample’s licensing information

    Abstract:
    A list template shows a list of items on the right, such as movies or TV shows. Focus on one to see its related content on the left, such as its artwork or description.
*/
var Template = function() {
    return '<?xml version="1.0" encoding="UTF-8"?>' +
    '<document>' +
        '<listTemplate>' +
            '<list>' +
                '<header>' +
                    '<title>Playback examples</title>' +
                '</header>' +
                '<section>' +
                    '<listItemLockup id="video">' +
                        '<title> (Here video title )   </title>' +
                    '</listItemLockup>' +
                    '<listItemLockup id="playlist">' +
                        '<title>Playlist</title>' +
                    '</listItemLockup>' +
                '</section>' +
            '</list>' +
        '</listTemplate>' +
    '</document>';
}

I have tried: ${title} and ${video.title} but it doesn't work.

Answer 1

The object you are attempting to reference is out of scope. You could modify your template to take a dictionary as an argument.

var Template = function(video) {
var doc = '<?xml version="1.0" encoding="UTF-8"?>' +
'<document>' +
    '<listTemplate>' +
        '<list>' +
            '<header>' +
                '<title>Playback examples</title>' +
            '</header>' +
            '<section>' +
                '<listItemLockup id="video">' +
                    '<title>${video["title"]}</title>' +
                '</listItemLockup>' +
                '<listItemLockup id="playlist">' +
                    '<title>Playlist</title>' +
                '</listItemLockup>' +
            '</section>' +
        '</list>' +
    '</listTemplate>' +
'</document>';
return doc;
}

You'll need to modify the call to create this template from within ResourceLoader.js like so:

var resource = Template.call(self, myVideoDictionary);