1

我已经看到了这个问题（Force view to reload tvml content on Apple TV/tvos），答案描述了如何从 DOM 中删除内容，但有没有办法添加它们？

我知道 NodeList 上的标准 appendChild，但是您将如何创建要附加的正确元素？也就是说，当您在 TVML 中创建文档时，它是一种特殊的 XML 语法，然后会被解析为文档。有没有办法只解析文档的一部分，以便您可以将其添加到，比如书架中的一个部分，以便在文档呈现后动态地将更多项目添加到行中？

PS 我已经尝试将 Presenter.parser.parseFromString() 与新项目的 xml 一起使用，但它使用该语法抛出了 IKDOMException。

4

2 回答 2

5

您可以采用多种方法来完成动态添加项目。需要注意的重要一点是，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.

这将在文档的第一个书架上添加一个新部分并锁定。

于 2016-01-16T22:22:51.450 回答
-1

更新：

您可以使用 DataItem API 通过原型来管理您的数据。

您不能将 JSON 对象直接绑定到模板，您必须将它们转换为 DataItem 对象。检索所需的部分元素并为该部分创建一个新数据项。从 JSON 对象创建新数据项。setPropertyPath 方法用于将新数据项绑定到节数据项。清单 5-4 显示了一个修改后的 parseJson 函数，它从 Images.json 文件中获取信息，将它们转换为数据项，并将它们绑定到适当的部分。

使用原型元素，您可以创建包含类似对象的单个锁定。在锁定内部，您定义锁定的结构。清单 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};" />

以下使用itemsfrom迭代并填充您的原型代码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

希望它可以帮助你。

于 2017-10-22T14:19:32.617 回答