TVML 动态添加项目?
TVML Add items dynamically?
我看过这个问题 (Force view to reload tvml content on Apple TV/tvos),答案描述了如何从 DOM 中删除内容,但是有什么方法可以添加它们吗?
我知道 NodeList 上的标准 appendChild,但是您将如何创建要追加的适当元素?也就是说,当您在 TVML 中创建文档时,它是一种特殊的 XML 语法,然后将其解析为文档。有没有一种方法可以只解析文档的一部分,以便您可以将其添加到,比如架子中的一个部分,以便在文档呈现后动态地将更多项目添加到行中?
P.S。我已经尝试将 Presenter.parser.parseFromString() 与 xml 一起用于新项目,但它会抛出一个 IKDOMException with that syntax.
您可以采用多种方法来完成动态添加项目。需要注意的重要一点是,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" 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.
这将在文档的第一个书架上添加一个新的部分和锁定。
更新:
您可以使用 DataItem API 通过原型管理您的数据。
You can’t bind JSON objects directly to a template, you have to turn them into DataItem objects. Retrieve the desired section element and create a new data item for the section. Create new data items from the JSON objects. The setPropertyPath method is used bind the new data items to the section data item. Listing 5-4 shows a modified parseJson function that takes the information from the Images.json file, turns them into data items, and binds them to the appropriate section.
Using the prototype element, you can create a single lockup that contains like objects. Inside of the lockup, you define the structure of the lockup. Listing 5-5 shows a lockup that displays the objects defined as artwork in the type element. The URL and title for each image are pulled from the JSON object.
<prototypes>
<lockup prototype="artwork">
<img binding="@src:{url};" width="200" height="300"/>
<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};" width="200" height="300"/>
<title binding="textContent:{title};" />
</lockup>
</prototypes>
<section binding="items:{images};" />
</shelf>
</collectionList>
</stackTemplate>
</document>
参考:
希望对你有帮助。
我看过这个问题 (Force view to reload tvml content on Apple TV/tvos),答案描述了如何从 DOM 中删除内容,但是有什么方法可以添加它们吗?
我知道 NodeList 上的标准 appendChild,但是您将如何创建要追加的适当元素?也就是说,当您在 TVML 中创建文档时,它是一种特殊的 XML 语法,然后将其解析为文档。有没有一种方法可以只解析文档的一部分,以便您可以将其添加到,比如架子中的一个部分,以便在文档呈现后动态地将更多项目添加到行中?
P.S。我已经尝试将 Presenter.parser.parseFromString() 与 xml 一起用于新项目,但它会抛出一个 IKDOMException with that syntax.
您可以采用多种方法来完成动态添加项目。需要注意的重要一点是,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" 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.
这将在文档的第一个书架上添加一个新的部分和锁定。
更新:
您可以使用 DataItem API 通过原型管理您的数据。
You can’t bind JSON objects directly to a template, you have to turn them into DataItem objects. Retrieve the desired section element and create a new data item for the section. Create new data items from the JSON objects. The setPropertyPath method is used bind the new data items to the section data item. Listing 5-4 shows a modified parseJson function that takes the information from the Images.json file, turns them into data items, and binds them to the appropriate section.
Using the prototype element, you can create a single lockup that contains like objects. Inside of the lockup, you define the structure of the lockup. Listing 5-5 shows a lockup that displays the objects defined as artwork in the type element. The URL and title for each image are pulled from the JSON object.
<prototypes>
<lockup prototype="artwork">
<img binding="@src:{url};" width="200" height="300"/>
<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};" width="200" height="300"/>
<title binding="textContent:{title};" />
</lockup>
</prototypes>
<section binding="items:{images};" />
</shelf>
</collectionList>
</stackTemplate>
</document>
参考:
希望对你有帮助。