如何向我傳遞對象或在我正在使用的TVML模板文件中設置變量？

Question

我正在使用Apple的TVMLCatalog示例文件，並且試圖將對象傳遞給我在演示者（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。