如何在 TVJS 中获取 TVML textField 的节点和键盘引用？答案

【问题标题】：How to get the node and keyboard reference of TVML textField in TVJS?如何在 TVJS 中获取 TVML textField 的节点和键盘引用？
【发布时间】：2015-09-27 14:26:29
【问题描述】：

有人在这里How do you get the value from a TVML textField? 提出了同样的问题，但没有解释完整的答案，我的评论已被编辑，建议我提出一个全新的问题。在这里……

谁能帮助了解如何最好地从 TVML 获得对 textField 节点及其键盘值的引用？现在，一旦用户单击显示表单和键盘的模板中的Done 按钮，我就在Presenter.js 中使用下面的代码来访问textField，但仍然得到

ITML : undefined 不是一个对象（评估'textField.getFeature'） - .../js/Presenter.js

当我使用getFeature("Keyboard"):

load: function(event) {  
var self = this,  
    ele = event.target,  
    templateURL = ele.getAttribute("template"),  
    presentation = ele.getAttribute("presentation"),  
    videoURL = ele.getAttribute("videoURL");  

if (templateURL && (event.type == "select")) {  
    var formTemplate = ele.parentNode.parentNode; // that should give me <formTemplate> element  
    var children = formTemplate.childNodes;  
    var textField = children[1]; // which is the second element in <formTemplate><banner></banner><textField></textField>...  
    var keyboard = textField.getFeature("Keyboard"); // this raises the ITML Error...  
    ...........................

更新：

我通过查看accessing elements by traversing XML DOM找到了解决方案：

var formTemplate = ele.parentNode.parentNode; // your formTemplate button  
var children = formTemplate.childNodes;  
var textField = children.item(1); // replace "1" with the index of "textField" element in your template  
var keyboard = textField.getFeature("Keyboard"); // get the textField's Keyboard element  
var userValue = keyboard.text; // the value entered by the user on the Apple TV keyboard

【问题讨论】：

标签： javascript apple-tv tvos tvml

【解决方案1】：

从文档的根目录开始怎么样？使用getElementsByTagName、getElementByTagName 或getElementById 访问textField。

var doc = navigationDocument.documents[navigationDocument.documents.length-1];
var textField = doc.getElementByTagName("textField")

var value = textField.getFeature("Keyboard").text;

【讨论】：

【解决方案2】：

假设自我解释的解决方案，我正在添加以完成更改回调的文本：

var keyboard = textField.getFeature("Keyboard");
keyboard.onTextChange = function () {
  console.log("onTextChange "+keyboard.text)
}

假设 formTemplate 是这样的

<formTemplate>
    <banner>
      <title>${formTitle}</title>
      <description class="longDescriptionLayout">${formDescription}</description>
    </banner>
    <textField>${formPlaceholder}</textField>
    <footer>
      <button id="pairingCodeInput">
        <text>Confirm</text>
      </button>
    </footer>
  </formTemplate>

在Presenter 类中，我将添加以处理更多选择器，例如：

if ((event.type == "select")) { // item selected
    if (itemId == "pairingCodeInput") { // form input
        var formTemplate = ele.parentNode.parentNode;
        var children = formTemplate.childNodes
        var textField = children.item(1)
        var keyboard = textField.getFeature("Keyboard")
        keyboard.onTextChange = function() {
            console.log("onTextChange " + keyboard.text)
        }
        var userValue = keyboard.text
        console.log("Entered " + userValue)

    }
}

【讨论】：

【解决方案3】：

你需要使用

xmlElem.item(i)

而不是

xmlElem.item[i]

【讨论】：