首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >TVML动态添加项?

TVML动态添加项?
EN

Stack Overflow用户
提问于 2016-01-16 17:10:12
回答 2查看 1.6K关注 0票数 1

我已经看到了这个问题(Force view to reload tvml content on Apple TV/tvos),答案描述了如何从DOM中删除内容,但是有什么方法可以添加它们吗?

我知道NodeList上的标准NodeList,但是如何创建要追加的适当元素呢?也就是说,当您在TVML中创建文档时,它是一种特殊的XML语法,然后被解析为文档。是否有一种方法仅解析文档的一部分,以便您可以将其添加到货架上的一个区段,以便在文档显示后动态地向行添加更多项?

我尝试过对新项使用Presenter.parser.parseFromString()和xml,但是它用这个语法抛出了一个IKDOMException。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-16 22:22:51

有很多方法可以实现动态添加项。值得注意的是,苹果的示例代码不是很好地为动态数据构建的。

创建模板后,可以通过多种方式更改文档。在创建模板之后,您应该拥有文档的所有权。在下面的示例中,变量doc包含我想要操作的堆栈模板文档。

代码语言:javascript
运行
复制
  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.

这将增加一个新的部分和锁在您的文件的第一个架子。

票数 5
EN

Stack Overflow用户

发布于 2017-10-22 14:19:32

更新:

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

不能将JSON对象直接绑定到模板,必须将它们转换为DataItem对象。检索所需的节元素,并为该节创建一个新数据项。从JSON对象创建新的数据项。使用setPropertyPath方法将新数据项绑定到节数据项。清单5-4显示了一个修改后的parseJson函数,它从Images.json文件中获取信息,将它们转换为数据项,并将它们绑定到适当的部分。 使用prototype元素,您可以创建包含类似对象的单个锁。在锁内,定义锁的结构。清单5-5显示了一个锁,它显示了在type元素中定义为艺术品的对象。每个图像的URL和标题都从JSON对象中提取。

代码语言:javascript
运行
复制
<prototypes>
    <lockup prototype="artwork">
        <img binding="@src:{url};" width="200" height="300"/>
        <title binding="textContent:{title};" />
    </lockup>
</prototypes>
<section binding="items:{images};" />

下面的代码使用来自itemssection迭代和填充原型代码

代码语言:javascript
运行
复制
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)
}

模板:

代码语言:javascript
运行
复制
<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

希望它能帮到你。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34829716

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档