TVML: Array als Argument für dynamische Templates

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • TVML: Array als Argument für dynamische Templates

    Hallo Zusammen,

    vorweg: das wird ein langer Post.
    Ich beschäftige mich gerade mit TVML. Meine Grundlage bildet das Beispiel von Apple. Im Moment versuche ich die Templates zu dynamisieren:

    In Index.xml.js erzeuge ich ein Array und definiere es als Attribut.

    Quellcode

    1. var namen = ["stefan", "otto", "willi", "tina"];
    2. <listItemLockup template="${this.BASEURL}templates/Compilation.xml.js" accessibilityText="Accessible compilation template" args="${namen}">



    In der load Funktion vom Presenter.js lese ich das Attribut wieder aus und übergebe es an den ResourceLoader.

    Quellcode

    1. load: function(event) {
    2. var self = this,
    3. ele = event.target,
    4. templateURL = ele.getAttribute("template"),
    5. presentation = ele.getAttribute("presentation");
    6. videoURL = ele.getAttribute("videoURL");
    7. args = ele.getAttribute("args");
    8. if (templateURL) {
    9. self.showLoadingIndicator(presentation);
    10. resourceLoader.loadResource(templateURL,
    11. function(resource) {
    12. if (resource) {
    13. var doc = self.makeDocument(resource);
    14. doc.addEventListener("select", self.load.bind(self));
    15. if (self[presentation] instanceof Function) {
    16. self[presentation].call(self, doc, ele);
    17. } else {
    18. self.defaultPresenter.call(self, doc);
    19. }
    20. }
    21. }, args
    22. );
    23. }
    24. },
    Alles anzeigen

    Im ResourceLoader.js geht es weiter. Das Array wird zum Template Aufruf weitergereicht.

    Quellcode

    1. ResourceLoader.prototype.loadResource = function(resource, callback, args) {
    2. var self = this;
    3. evaluateScripts([resource], function(success) {
    4. if (success) {
    5. var resource = Template.call(self, args);
    6. callback.call(self, resource);
    7. } else {
    8. var title = "Resource Loader Error",
    9. description = `There was an error attempting to load the resource '${resource}'. \n\n Please try again later.`,
    10. alert = createAlert(title, description);
    11. Presenter.removeLoadingIndicator();
    12. navigationDocument.presentModal(alert);
    13. }
    14. });
    15. }
    Alles anzeigen

    In nun endlich im Template benutzt. Ich habe mich als Beispiel für das Compilation.xml.js entschieden.

    Quellcode

    1. var Template = function(args) { return `<?xml version="1.0" encoding="UTF-8" ?>
    2. <document>
    3. <head>
    4. <style>
    5. .ordinalLayout {
    6. margin: 8 0 0 9;
    7. }
    8. .whiteButton {
    9. tv-tint-color: rgb(255, 255, 255);
    10. }
    11. </style>
    12. </head>
    13. <compilationTemplate theme="dark">
    14. <list>
    15. <relatedContent>
    16. <itemBanner>
    17. <heroImg src="${this.BASEURL}resources/images/italy/italy_20_square.jpg" />
    18. <row>
    19. <buttonLockup>
    20. <badge src="resource://button-add-alt" class="whiteButton" />
    21. <title>Title 1</title>
    22. </buttonLockup>
    23. <buttonLockup>
    24. <badge src="resource://button-rate" class="whiteButton" />
    25. <title>Title 2</title>
    26. </buttonLockup>
    27. <buttonLockup>
    28. <badge src="resource://button-more" class="whiteButton" />
    29. <title>Title 3</title>
    30. </buttonLockup>
    31. </row>
    32. </itemBanner>
    33. </relatedContent>
    34. <header>
    35. <title>${args}</title>
    36. <subtitle>Subtitle</subtitle>
    37. <row>
    38. <text>Text 1</text>
    39. <text>Text 2</text>
    40. </row>
    41. </header>
    42. <section>
    43. <header>
    44. <title>Title</title>
    45. </header>
    46. <listItemLockup>
    47. <ordinal minLength="2" class="ordinalLayout">1</ordinal>
    48. <title>${args[0]}</title>
    49. <subtitle>Subtitle 1</subtitle>
    50. <decorationLabel>Right label 1</decorationLabel>
    51. </listItemLockup>
    52. <listItemLockup>
    53. <ordinal minLength="2" class="ordinalLayout">2</ordinal>
    54. <title>${args[1]}</title>
    55. <subtitle>Subtitle 2</subtitle>
    56. <decorationLabel>Right label 2</decorationLabel>
    57. </listItemLockup>
    58. <listItemLockup>
    59. <ordinal minLength="2" class="ordinalLayout">3</ordinal>
    60. <title>Title 3</title>
    61. <subtitle>Subtitle 3</subtitle>
    62. <decorationLabel>Right label 3</decorationLabel>
    63. </listItemLockup>
    64. <listItemLockup>
    65. <ordinal minLength="2" class="ordinalLayout">4</ordinal>
    66. <title>Title 4</title>
    67. <subtitle>Subtitle 4</subtitle>
    68. <decorationLabel>Right label 4</decorationLabel>
    69. </listItemLockup>
    70. <listItemLockup>
    71. <ordinal minLength="2" class="ordinalLayout">5</ordinal>
    72. <title>Title 5</title>
    73. <subtitle>Subtitle 5</subtitle>
    74. <decorationLabel>Right label 5</decorationLabel>
    75. </listItemLockup>
    76. <listItemLockup>
    77. <ordinal minLength="2" class="ordinalLayout">6</ordinal>
    78. <title>Title 6</title>
    79. <subtitle>Subtitle 6</subtitle>
    80. <decorationLabel>Right label 6</decorationLabel>
    81. </listItemLockup>
    82. <listItemLockup>
    83. <ordinal minLength="2" class="ordinalLayout">7</ordinal>
    84. <title>Title 7</title>
    85. <subtitle>Subtitle 7</subtitle>
    86. <decorationLabel>Right label 7</decorationLabel>
    87. </listItemLockup>
    88. <listItemLockup>
    89. <ordinal minLength="2" class="ordinalLayout">8</ordinal>
    90. <title>Title 8</title>
    91. <subtitle>Subtitle 8</subtitle>
    92. <decorationLabel>Right label 8</decorationLabel>
    93. </listItemLockup>
    94. <listItemLockup>
    95. <ordinal minLength="2" class="ordinalLayout">9</ordinal>
    96. <title>Title 9</title>
    97. <subtitle>Subtitle 9</subtitle>
    98. <decorationLabel>Right label 9</decorationLabel>
    99. </listItemLockup>
    100. </section>
    101. </list>
    102. </compilationTemplate>
    103. </document>`
    Alles anzeigen

    Anscheinend geht irgendwo auf dem Weg die Information verloren, dass es sich um ein Array handelt. Es reagiert wie ein String. Das Ergebnis habe ich als Bild angefügt. Leider fehlt mir das javascript Wissen, um mir selbst weiter zu helfen.

    Wo ist der Fehler?
    Dateien

    • compilation.png

      (475,29 kB, 274 mal heruntergeladen, zuletzt: )