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

Я работаю с примерами файлов 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);
                    }
                }
            );

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


tvos apple-tv tvml
person user3331252    schedule 20.09.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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

В функции 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")

    });
}

Проверьте этот список, чтобы найти дополнительные руководства.

person Taha    schedule 20.09.2015
comment
Для дальнейшего использования другими, не забудьте отметить это как правильный ответ, если вы найдете его полезным. - person Taha; 21.09.2015
comment
Конечно, я бы сделал это, если бы знал, как это сделать. Я попытался проголосовать за ответ и получил сообщение о том, что моя репутация недостаточно высока. Это забавно — Stack Overflow — это моя жизнь, но до сих пор я никогда не задавал вопросов, поэтому никогда не имел учетной записи. - person user3331252; 23.09.2015