Question

我有一个非常简短的问题，对你们中的一些人来说可能是微不足道的，但我在TVML的文档中找不到任何东西。因为我通常是一名设计师，所以我不需要处理很多代码。

我使用productBundleTemplate来构建应用程序的主页面。这是一个例子：

> <section>
>         <lockup>
>           <img src="${this.BASEURL}resources/test.jpg" width="332" height="500" />
>           <title class="showTextOnHighlight"></title>
>           <overlay>
>             <progressBar value="0.1" />
>           </overlay>
>           <relatedContent>
>             <infoTable>
>               <header>
>                 <title>Test</title>
>               </header>
>               <info>
>                 <header>
>                   <title></title>
>                 </header>
>                 <description allowsZooming="true">This is great</description>
>               </info>
>             </infoTable>
>           </relatedContent>
>         </lockup>

现在我想将此产品链接到其他产品页面。我需要使用哪些代码？

我的最后一个问题是，如何将按钮链接到其他内容。我猜这将是一样的，但只是为了确保我也提到它。我确定TVML文档中必须有某种参考，但我找不到任何参考。任何帮助将不胜感激。

提前致谢，埃里克

Answer 1

我想我可以提供帮助。您需要具备的是您需要引用要从is页面加载的新产品页面。例如：＆LT; 锁定模板= http://...url到此处的模板...＆gt;

      <img src="${this.BASEURL}resources/test.jpg" width="332" height="500" />
      <title class="showTextOnHighlight"></title>
      <overlay>

在 presenter.js 文件中（我相信你有），你需要有一个在选择图像时加载此模板的功能。

最后在你的main.js或application.js（无论你怎么称呼它）中，你必须在文档中添加一个eventlistener。这应该加载文件。

如果我刚刚说的一切听起来像是胡言乱语，请查看并下载苹果的示例tvml项目。它有助于展示如何开始浏览模板的基础知识。 https://developer.apple.com/library/prerelease/tvos/samplecode/TVMLCatalog/Introduction/Intro.html 希望这有助于萌芽。

Answer 2

如果您说＆＃34;将此产品链接到其他产品页面＆＃34;，我认为您的意思是当用户将选择移动到该项目然后选择它时（点击Siri遥控器上的触摸板，按下在IR遥控器上选择，点击远程iOS应用程序中的屏幕），您希望基于productBundleTemplate的当前显示消失，并希望显示基于productTemplate的新显示。此外，通过将按钮链接到其他内容＆＃34;，我认为你的意思是类似的，导航到按钮然后选择它会转到另一个页面。

这有三个部分。＆＃34;开箱即用＆＃34;，选择项目除了稍微摇晃UI之外什么也不做。（当用户点击链接时，如果网络浏览器没有内置的跟随href的概念，那就好了。）

所以第一部分是，你必须为＆＃34; select＆＃34;设置一个JavaScript事件处理程序。事件。对于列表内部和按钮的锁定，＆＃34;选择＆＃34;是用户执行此操作时触发的事件。还有其他事件，但我认为＆＃34;选择＆＃34;是你想要的那两件事。

第二部分是，你必须决定去哪里。有几种方法可以做到这一点，但最简单的方法是向接收＆＃34;选择＆＃34;的TVML元素添加自定义属性。事件。然后，您可以从事件处理程序中的事件中取消引用元素，读取自定义属性，然后关闭并运行。如果您的产品页面是静态生成的，您可能只包含一个实际的URL，甚至可能使用＆＃34; href＆＃34;作为一个属性。如果您的产品页面是动态生成的，那么您可以定义一个＆＃34; productid＆＃34;属性。

第三部分是将新内容放入JavaScript的内存中，然后使用＆＃34; navigationDocument＆＃34;上的方法将其放在用户面前。宾语。如果您正在处理已存在于某处的TVML文件，例如应用程序包或服务器，那么您可以通过进行XMLHttpRequest调用来获取它。如果你正在处理完全在你的JavaScript中动态构建的TVML，那么你需要编写代码才能做到这一点（但它不一定非常复杂）。

我已经看到过＃＆＃34;现有的带有URL＆＃34的TVML文件的最简单的例子。方法在这里：

https://gist.github.com/rayh/d023aeba28a25ed7f7f2

我见过的最简单的例子是＆＃34;动态创建TVML＆＃34;方法是＆＃34; createAlert＆＃34;函数在以下教程中：

http://www.raywenderlich.com/114886/beginning-tvos-development-with-tvml-tutorial

Answer 3

如果您使用atvjs框架，您的要求很容易实现。您需要做的就是将data-href-page属性添加到您的可选元素，并将值作为您之前创建的页面的名称。框架将自动导航到选择页面。这是一个帮助您入门的片段。

// your template
var homepageDoc = `<document>
                    <productBundleTemplate>
                        /* usual tvml elements */
                            <lockup data-href-page="details">
                                /* usual tvml elements */
                            </lockup>
                    </productBundleTemplate>
                </document>`;
// create pages
ATV.Page.create({
    name: 'homepage',
    template: function(data) {
        return homepageDoc;
    }
});
ATV.Page.create({
    name: 'details',
    /* and other usual params */
});

// later in your application, navigate to your initial page
ATV.Navigation.navigate('homepage');

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

Answer 4

要为TVML应用做这件事，你需要一点点javascript和一点TVML。

如果您在第二部分（在页面之间导航）中使用Apple的TVML参考创建动态页面内容指南（https://developer.apple.com/library/content/documentation/TVMLKitJS/Conceptual/TVMLProgrammingGuide/ExpandingYourApp.html#//apple_ref/doc/uid/TP40016718-CH3-SW2），它会告诉您需要做什么。

简而言之，你需要在你的javascript中使用一个函数（取自上面链接中的示例代码）：

function getDocument(url) {
    var templateXHR = new XMLHttpRequest();
    templateXHR.responseType = "document";
    templateXHR.addEventListener("load", function() {pushDoc(templateXHR.responseXML);}, false);
    templateXHR.open("GET", url, true);
    templateXHR.send();
}

然后在你的TVML中，你需要一个按钮或其他东西供用户按下。

<button onselect="getDocument('templates/NextPage.xml')">
        <text>Next page</text>
</button>

关键是要添加onselect =＆＃34; getDocument（＆＃39;链接到新的tvml页面＆＃39;）＆＃34; ，它来自您添加到您的JavaScript的代码。

按钮

4 个答案: