TVML 动态添加项目?
Posted
技术标签:
【中文标题】TVML 动态添加项目?【英文标题】:TVML Add items dynamically? 【发布时间】:2016-01-16 17:10:12 【问题描述】:我看到了这个问题 (Force view to reload tvml content on Apple TV/tvos),答案描述了如何从 DOM 中删除东西,但有什么方法可以添加它们?
我知道 NodeList 上的标准 appendChild,但是您将如何创建要附加的正确元素?也就是说,当您在 TVML 中创建文档时,它是一种特殊的 XML 语法,然后会被解析为文档。有没有办法只解析文档的一部分,然后您可以将其添加到,比如书架中的一个部分,以便在文档呈现后动态地将更多项目添加到行中?
附:我尝试将 Presenter.parser.parseFromString() 与新项目的 xml 一起使用,但它使用该语法抛出了 IKDOMException。
【问题讨论】:
【参考方案1】:您可以采用多种方法来完成动态添加项目。需要注意的重要一点是,Apple 的示例代码没有很好地针对动态数据进行结构化。
创建模板后,您可以通过多种方式更改文档。创建模板后,您应该拥有文档的所有权。在以下示例中,变量 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" />
<title>Title Goes Here</title>
</lockup>
</section>`;
shelfToAddTo.insertAdjacenthtml('beforeend', sectionToAdd); //this will add the new section before the </shelf> tag.
这将添加一个新部分并锁定到文档的第一个书架。
【讨论】:
非常感谢。事实上,我可以将原始 html 与我所缺少的 insertAdjacentHTML() 一起使用。【参考方案2】:更新:
您可以使用 DataItem API 通过原型管理您的数据。
您不能将 JSON 对象直接绑定到模板,您必须将它们转换为 DataItem 对象。检索所需的部分元素并为该部分创建一个新数据项。从 JSON 对象创建新数据项。 setPropertyPath 方法用于将新数据项绑定到节数据项。清单 5-4 显示了一个修改后的 parseJson 函数,它从 Images.json 文件中获取信息,将它们转换为数据项,并将它们绑定到适当的部分。
使用原型元素,您可以创建包含类似对象的单个锁定。在锁定内部,您定义锁定的结构。清单 5-5 显示了一个锁定,它显示了在 type 元素中定义为艺术品的对象。每个图像的 URL 和标题都是从 JSON 对象中提取的。
<prototypes>
<lockup prototype="artwork">
<img binding="@src:url;" />
<title binding="textContent:title;" />
</lockup>
</prototypes>
<section binding="items:images;" />
以下使用来自section
的items
迭代并填充您的原型代码:
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;" />
<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
希望对你有所帮助。
【讨论】:
以上是关于TVML 动态添加项目?的主要内容,如果未能解决你的问题,请参考以下文章