Question

我正在使用＆＃39; Compilation.xml＆＃39;来自TVMLCatalog

的模板

我想将按钮点击事件添加到＆＃39; listItemLockup＆＃39;

<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)

是＆＃34;选择＆＃34;正确的类型？

我一直在使用以下教程

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

我尝试将其添加到＆＃39; onLaunch＆＃39;

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);
}

我先看到错误

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

Answer 1

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相关的“更新”不是一个函数。 “doc”实际上并不存在，但一般模式是用

来实现它

var doc = getActiveDocument();

我以为你会知道上面的内容。这样可以解决吗？

Answer 2

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

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

Answer 3

在寻址NodeList中的项目时，使用item（i）方法而不是标准数组访问表示法：

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

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

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的创建者和维护者。在撰写此答案时，它是使用TVML和TVJS进行Apple TV开发的唯一 JavaScript框架。因此，我只能从这个框架提供参考。答案不应该被误解为偏见。

TVML listItemLockup点击事件

4 个答案: