0

我有一个非常简短的问题，对你们中的一些人来说可能是微不足道的，但我在 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 文档中一定有某种参考，但我找不到任何参考。任何帮助都感激不尽。

在此先感谢，埃里克

4

4 回答 4

0

如果您使用的是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 框架。因此我只能从这个框架中提供参考。答案不应被误认为是有偏见的意见。

于 2016-01-26T11:13:34.410 回答
0

要为 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="getDocument('link to new tvml page')" ，它来自您添加到 javascript 的代码。

于 2017-05-04T20:24:03.737 回答
0

我想我可以帮忙。您需要的是您需要参考您想从 is 页面加载的新产品页面。例如：< lockup template= http://...url to your template here...>

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

在您的presenter.js文件（我确定您有）中，您需要一个在选择图像时加载此模板的函数。

最后，在您的 main.js 或 application.js（无论您如何称呼它）中，您必须在文档中添加一个事件监听器。这应该加载文件。

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

于 2015-11-10T04:08:14.980 回答
0

当您说“将此产品链接到不同的产品页面”时，我认为您的意思是当用户将选择移动到该项目然后选择它时（单击 Siri 遥控器上的触摸板，按下 IR 遥控器上的选择，点击屏幕），您希望基于 productBundleTemplate 的当前显示消失，并改为显示基于 productTemplate 的新显示。此外，通过“将按钮链接到其他内容”，我假设您的意思类似，导航到按钮然后选择它会转到不同的页面。

这分为三个部分。“开箱即用”，选择项目不会做任何事情，只是稍微摇晃一下 UI。（这就像网络浏览器在用户点击链接时没有内置的跟随 href 的概念一样。）

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

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

第三部分是将新内容放入 JavaScript 的内存中，然后通过“navigationDocument”对象上的方法将其放在用户面前。如果您正在处理已经存在于某处的 TVML 文件，例如在应用程序包或您的服务器中，那么您可以通过调用 XMLHttpRequest 来获取它。如果您正在处理完全在 JavaScript 中动态构建的 TVML，那么您需要编写代码来执行此操作（但不必非常复杂）。

我见过的“带有 URL 的现有 TVML 文件”方法的最简单示例如下：

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

我见过的“动态创建 TVML”方法的最简单示例是以下教程中的“createAlert”函数：

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

于 2016-01-12T18:42:58.427 回答