TVML listItemLockup 点击事件

Question

我正在使用'Compilation.xml' template from the TVMLCatalog

我想将按钮单击事件添加到“listItemLockup”

<listItemLockup>
  <ordinal minLength="2" class="ordinalLayout">0</ordinal>
  <title>Intro</title>
  <subtitle>00</subtitle>
  <decorationLabel>(3:42)</decorationLabel>
</listItemLockup>

我试过添加：

App.onLaunch = function(options) {
    var templateURL = 'http://localhost:8000/hello.tvml';
    var doc = getDocument(templateURL);
    //doc.addEventListener("select", function() { alert("CLICK!") }, false);
    var listItemLockupElement = doc.getElementsByTagName("listItemLockup");
    listItemLockupElement.addEventListener("select", function() { alert("CLICK!") }, false);
}

addEventListener

void addEventListener (in String type, in Object listener, in optional Object extraInfo)

"select" 是正确的类型吗？

我一直在使用以下教程

http://jamesonquave.com/blog/developing-tvos-apps-for-apple-tv-with-swift/

http://jamesonquave.com/blog/developing-tvos-apps-for-apple-tv-part-2/

更新

我收到一个错误

ITML <Error>: doc.getElementsByTagName is not a function. (In 'doc.getElementsByTagName("listItemLockup")', 'doc.getElementsByTagName' is undefined) - http://localhost:8000/main.js - line:27:58

我尝试将此添加到 'onLaunch'

var listItemLockupElements = doc.getElementsByTagName("listItemLockup");
for (var i = 0; i < listItemLockupElements.length; i++) {   
    //var ele = listItemLockupElements[i].firstChild.nodeValue;
    listItemLockupElements[i].addEventListener("select", function() { alert("CLICK!") }, false);
}

我先看看错误

十字Post：https://forums.developer.apple.com/thread/17859

Answer 1

var listItemLockupElement = doc.getElementsByTagName("listItemLockup”);

在这种情况下，listItemLockupElement 是一个 NodeList，而不是一个元素。您可以遍历列表并向每个 listItemLockup 添加事件侦听器，也可以将事件侦听器添加到包含元素。

Answer 2

在 NodeList 中寻址项目时，您使用 item(i) 方法而不是标准数组访问符号：

 listItemLockupElements.item(i).addEventListener("select", function() { })

参见：https://developer.mozilla.org/en-US/docs/Web/API/NodeList/item

Answer 3

我在 Apple 看到的更常见的示例是定义单个整体侦听器，例如：

doc.addEventListener("select", Presenter.load.bind(Presenter));

在您的 xml 中，为元素分配唯一 ID，或为它们提供识别它们的方法。例如，开头是这样的：

load: function(event) {
        var self = this,
            ele = event.target,
            attr_id = ele.getAttribute("id"),
            audioURL = ele.getAttribute("audioURL"),
            videoURL = ele.getAttribute("videoURL")

然后你就可以随心所欲地处理你的物品了。

if(audioURL && (event.type === "select" || event.type === "play")) {
//
}

我的建议是针对此模式更仔细地研究 Presenter.js 文件。

编辑：回答与 doc.getElementsByTagName 相关的 "Update" 不是函数。 "doc" 实际上并不存在，但一般模式是通过

获取它

var doc = getActiveDocument();

我以为你会知道以上内容。这能解决问题吗？

Answer 4

如果您使用 atvjs 框架，添加事件侦听器非常简单。

ATV.Page.create({
    name: 'mypage',
    template: your_template_function,
    data: your_data,
    events: {
        select: 'onSelect',
    },
    // method invoked in the scope of the current object and
    // 'this' will be bound to the object at runtime
    // so you can easily access methods and properties and even modify them at runtime
    onSelect: function(e) {
        let element = e.target;
        let elementType = element.nodeName.toLowerCase();

        if (elementType === 'listitemlockup') {
            this.doSomething();
        }
    },
    doSomething: function() {
        // some awesome action
    }
});

ATV.Navigation.navigate('mypage');

免责声明：我是 atvjs 的创建者和维护者，在撰写此答案时，它是仅 JavaScript可用于使用 TVML 和 TVJS 进行 Apple TV 开发的框架。因此我只能从这个框架中提供参考。答案不应被误认为是有偏见的意见。

TVML listItemLockup 点击事件

TVML listItemLockup click event

tvos

tvml