我已经看到了这个问题(Force view to reload tvml content on Apple TV/tvos),答案描述了如何从DOM中删除内容,但是有什么方法可以添加它们吗?
我知道NodeList上的标准NodeList,但是如何创建要追加的适当元素呢?也就是说,当您在TVML中创建文档时,它是一种特殊的XML语法,然后被解析为文档。是否有一种方法仅解析文档的一部分,以便您可以将其添加到货架上的一个区段,以便在文档显示后动态地向行添加更多项?
我尝试过对新项使用Presenter.parser.parseFromString()和xml,但是它用这个语法抛出了一个IKDOMException。
发布于 2016-01-16 22:22:51
有很多方法可以实现动态添加项。值得注意的是,苹果的示例代码不是很好地为动态数据构建的。
创建模板后,可以通过多种方式更改文档。在创建模板之后,您应该拥有文档的所有权。在下面的示例中,变量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.
这将增加一个新的部分和锁在您的文件的第一个架子。
发布于 2017-10-22 14:19:32
更新:
您可以使用DataItem API来使用原型来管理数据。
不能将JSON对象直接绑定到模板,必须将它们转换为DataItem对象。检索所需的节元素,并为该节创建一个新数据项。从JSON对象创建新的数据项。使用setPropertyPath方法将新数据项绑定到节数据项。清单5-4显示了一个修改后的parseJson函数,它从Images.json文件中获取信息,将它们转换为数据项,并将它们绑定到适当的部分。 使用prototype元素,您可以创建包含类似对象的单个锁。在锁内,定义锁的结构。清单5-5显示了一个锁,它显示了在type元素中定义为艺术品的对象。每个图像的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://stackoverflow.com/questions/34829716
复制相似问题