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

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

这会在文档的第一个工具栏中添加一个新部分和锁定。

Answer 2

<强>更新

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

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

使用prototype元素，您可以创建包含类似对象的单个锁定。在锁定内部，您可以定义锁定的结构。清单5-5显示了一个锁定，它显示了在type元素中定义为artwork的对象。每个图像的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

希望它对你有所帮助。

TVML动态添加项目？

2 个答案: