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

Question

这里有人问了同样的问题：如何从TVML textField中获取值？但没有解释完整的答案，我在那里的评论被编辑了，建议我问一个全新的问题。给…

有人能帮助理解如何从TVML中最好地获得对textField节点及其键盘值的引用吗？现在，我在Presenter.js中使用下面的代码，一旦用户单击显示表单的模板中的Done按钮，就可以访问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...  
    ...........................

---

更新：

我通过遍历XMLDOM:来访问元素，找到了解决方案

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 

Answer 1

从文档的根开始如何？使用getElementsByTagName、getElementByTagName或getElementById来访问textField。

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

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

Answer 3

您需要使用

xmlElem.item(i)

而不是

xmlElem.item[i]