Событие клика listItemLockup TVML

Я использую 'Compilation.xml из Каталог TVML

Я хочу добавить событие нажатия кнопки в 'списокItemLockup'

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

Является ли «выбрать» правильный тип?

Я использовал следующие учебники

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

сначала посмотрю на ошибку

Кросс-пост: https://forums.developer.apple.com/thread/17859


tvos tvml
person Alex Hedley    schedule 13.09.2015    source источник
comment
Я внес изменения, чтобы ответить на ваше обновление, пожалуйста, проверьте мой ответ.   -  person SerkanSerttop    schedule 01.04.2016

Ответы (4)


arrow_upward
5
arrow_downward

Более распространенный пример, который я видел в Apple, — это определение одного общего слушателя, например:

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

В вашем xml назначьте уникальные идентификаторы элементам или предоставьте им способы их идентификации. Например, начало будет примерно таким:

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

Я предполагал, что вы знаете вышеизложенное. Это исправит?

person SerkanSerttop    schedule 09.11.2015

arrow_upward
1
arrow_downward 

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

В этом случае listItemLockupElement является NodeList, а не элементом. Вы можете выполнить итерацию по списку и добавить прослушиватель событий к каждому listItemLockup или добавить прослушиватель событий к содержащему элементу.

person Daniel Carter    schedule 14.09.2015

arrow_upward
0
arrow_downward

При обращении к элементам в NodeList вы используете метод item(i), а не стандартную нотацию доступа к массиву:

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

См.: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/item

person Aodh    schedule 24.09.2015

arrow_upward
0
arrow_downward

Добавить прослушиватели событий несложно, если вы используете структуру 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, доступная для разработки Apple TV с использованием TVML и TVJS. Следовательно, я мог предоставить ссылки только из этого фреймворка. Ответ не следует принимать за предвзятое мнение.

person eMAD    schedule 30.01.2016