TVML動態添加項目？

Question

我看到了這個問題（Force view to reload tvml content on Apple TV/tvos），答案描述瞭如何從DOM中刪除東西，但有什麼方法可以添加它們嗎？

我知道關於NodeList上的標準appendChild，但是如何創建要附加的正確元素？也就是說，當你在TVML中創建一個文檔時，它是一種特殊的XML語法，然後被解析爲一個文檔。有沒有辦法只解析一個文檔的一部分，然後可以將它添加到一個書架中的一個部分中，以便在文檔出現後動態地向該行添加更多的項目？

P.S.我已經嘗試使用Presenter.parser.parseFromString（）與新項目的xml，但它是用該語法拋出IKDOMException。

Answer 1

有很多方法可以用來動態添加項目。需要注意的一點很重要，蘋果的示例代碼不是很好地適用於動態數據。

創建模板後，可以通過多種方式更改文檔。創建模板後，您應擁有文檔的所有權。在下面的示例中，變量doc包含我想操作的堆棧模板文檔。

var shelves = doc.getElementsByTagName("shelf"); //get all the shelves 
    var shelfToAddTo = shelves.item(0); //choose the index for the shelf you want to add to. 
    var sectionToAdd = `<section> 
      <lockup> 
      <img src="pathToImg" width="100" height="100"/> 
      <title>Title Goes Here</title> 
      </lockup> 
      </section>`; 
    shelfToAddTo.insertAdjacentHTML('beforeend', sectionToAdd); //this will add the new section before the </shelf> tag. 

這將您的文檔中添加一個新的部分，並鎖定到第一架。

Answer 2

UPDATE：

您可以使用DataItem的API與原型來管理您的數據。

不能將JSON對象直接綁定到模板，必須將它們轉換爲DataItem對象。檢索所需的節元素併爲節創建一個新的數據項。從JSON對象中創建新的數據項。 setPropertyPath方法用於將新數據項綁定到段數據項。清單5-4顯示了一個修改過的parseJson函數，該函數從Images.json文件獲取信息，將它們轉換爲數據項並將它們綁定到適當的部分。

使用原型元素，可以創建包含類似對象的單個鎖定。在鎖定的內部，您可以定義鎖定的結構。清單5-5顯示了一個鎖定，它將類型元素中定義爲圖片的對象顯示出來。每個圖像的URL和標題都從JSON對象中提取。

<prototypes> 
    <lockup prototype="artwork"> 
     <img binding="@src:{url};" width="200" height="300"/> 
     <title binding="textContent:{title};" /> 
    </lockup> 
</prototypes> 
<section binding="items:{images};" /> 

以下迭代和填充使用你的原型代碼items從section：

function parseJson(information) { 
    var results = JSON.parse(information); 
    let parsedTemplate = templateDocument() 
    navigationDocument.pushDocument(parsedTemplate) 

    let shelf = parsedTemplate.getElementsByTagName("shelf").item(0) 
    let section = shelf.getElementsByTagName("section").item(0) 

    //create an empty data item for the section 
    section.dataItem = new DataItem() 

    //create data items from objects 
    let newItems = results.map((result) => { 
     let objectItem = new DataItem(result.type, result.ID); 
     objectItem.url = result.url; 
     objectItem.title = result.title; 
     return objectItem; 
    }); 

    //add the data items to the section's data item; 'images' relates to the binding name in the protoype where items:{images} is all of the newItems being added to the sections' data item; 
    section.dataItem.setPropertyPath("images", newItems) 
} 

模板：

<document> 
    <stackTemplate> 
     <banner> 
      <title>JSON Shelf</title> 
     </banner> 
     <collectionList> 
      <shelf> 
       <prototypes> 
        <lockup prototype="artwork"> 
         <img binding="@src:{url};" width="200" height="300"/> 
         <title binding="textContent:{title};" /> 
        </lockup> 
       </prototypes> 
       <section binding="items:{images};" /> 
      </shelf> 
     </collectionList> 
    </stackTemplate> 
</document> 

參考：

https://developer.apple.com/library/content/documentation/TVMLKitJS/Conceptual/TVMLProgrammingGuide/GeneratingContentForYourApp.html

希望它可以幫助你。