Как передать объект или установить переменную в файле шаблона TVML, который я использую?

Question

Я работаю с образцами файлов TVMLCatalog от Apple, и я застреваю, пытаясь передать объект в файл шаблона, который я загружаю в презентаторе (файл javascript). Кажется, это должно быть совершенно рудиментарным, что нужно сделать, но мне это ударило.

У меня есть следующее, которое загружает шаблон с загрузчиком ресурсов и толкает его в представление.

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); 
        } 
       } 
      ); 

Где я могу определить объект или установить переменную, которая будет находиться в документе при загрузке файла шаблона в представление?

Answer 1

Да! Вы можете вставлять переменные в ваши шаблоны TVML.

Во-первых, вам нужно создать строку, содержащую тот же шаблон TVML, и использовать ${variable} для ввода значений. Затем используйте объект DOMParser для преобразования этой строки в элемент XML DOM. Наконец, представить документ с помощью метода presentModal (главный объект navigationDocument)

Ваша функция будет выглядеть следующим образом:

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: Я использовал шаблон каталога в качестве примера. Вы можете использовать любые template

В функции onLaunch вы можете вызвать функцию catalogTemplate, передав любую переменную.

App.onLaunch = function(options) {  
catalogTemplate("title", "Maleficent.", "The Dark knight"); 
} 

Вы можете добавить слушателя и передать функцию, чтобы перейти на другую страницу или вызвать действие с помощью 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); 
} 

Давайте создадим еще один шаблон только для демонстрации, как мы переходим на другую страницу путем выбора конкретный элемент.

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); 
} 

В нашей функции onLaunch.

App.onLaunch = function(options) {  

catalogTemplate("title", "Maleficent.", "The Dark knight", function() { 
     navigationDocument.dismissModal(); 

     ratingTemplate(“rating template title") 

    }); 
} 

Проверьте этот список для более tutorials.