knockout.js Knockout JS在大型JSON对象上循环，在控制台中出现未定义的错误

dsf9zpds  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(232)

我有一个JSON对象，它有一个敲除代码，它循环以获得一组特定的结果并显示它们。它进行了一些渲染，但它说有一个错误。我不知道为什么。有人能看一下吗？提前谢谢

  1. var json = {
  2.     "available": true,
  3.     "screens": [{
  4.             "id": "s01",
  5.             "type": "Selector",
  6.             "config": {
  7.                 "views": [{
  8.                     "id": "sintel",
  9.                     "type": "selectorItem",
  10.                     "thumbnail": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/img/thumb_sintel.png",
  11.                     "title": "Sintel",
  12.                     "description": "Small video. HTML5, native controls, start poster. Bottom, right social. Video + grid",
  13.                     "info": "00:51"
  14.                 }, {
  15.                     "id": "bbb",
  16.                     "type": "selectorItem",
  17.                     "thumbnail": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/img/thumb_bbb.png",
  18.                     "title": "Big Buck Bunny",
  19.                     "description": "Large video. HTML5, custom controls, social hover. Video + replay",
  20.                     "info": "00:33"
  21.                 }, {
  22.                     "id": "walle",
  23.                     "type": "selectorItem",
  24.                     "thumbnail": "http://test-cdn.selectablemedia.com/test/a/walle/assets/img/thumb_walle.png",
  25.                     "title": "WALL-E",
  26.                     "description": "Small video. Youtube, custom controls. Left social. Video + carousel.",
  27.                     "info": "02:30"
  28.                 }]
  29.             }
  30.         },
  31.         {
  32.             "id": "sintel",
  33.             "type": "BrandWrapper",
  34.             "config": {
  35.                 "views": [{
  36.                     "id": "sintelBranding",
  37.                     "type": "fullBranding",
  38.                     "url": "sintel_single.png"
  39.                 }, {
  40.                     "id": "sintelPlayer",
  41.                     "type": "smPlayerIframe",
  42.                     "files": [{
  43.                             "type": "mp4",
  44.                             "codecs": "h264,aac",
  45.                             "url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.mp4"
  46.                         },
  47.                         {
  48.                             "type": "mp4",
  49.                             "codecs": "avc1.42E01E,mp4a.40.2",
  50.                             "url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.mp4"
  51.                         },
  52.                         {
  53.                             "type": "ogv",
  54.                             "codecs": "theora,vorbis",
  55.                             "url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.ogv"
  56.                         },
  57.                         {
  58.                             "type": "flv",
  59.                             "codecs": "h264,aac",
  60.                             "url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.flv"
  61.                         }
  62.                     ]
  63.                 }, {
  64.                     "id": "sintelLeftClickArea",
  65.                     "type": "brandClickArea",
  66.                     "area": "leftTower",
  67.                     "clickParams": {
  68.                         "value": "https://durian.blender.org/"
  69.                     }
  70.                 }, {
  71.                     "id": "sintelHeaderClickArea",
  72.                     "type": "brandClickArea",
  73.                     "area": "header",
  74.                     "clickParams": {
  75.                         "value": "https://durian.blender.org/about/"
  76.                     }
  77.                 }, {
  78.                     "id": "sintelFooterClickArea",
  79.                     "type": "brandClickArea",
  80.                     "area": "footer",
  81.                     "clickParams": {
  82.                         "value": "https://durian.blender.org/gallery/"
  83.                     }
  84.                 }]
  85.             }
  86.         },
  87.         {
  88.             "id": "bbb",
  89.             "type": "BrandWrapper",
  90.             "config": {
  91.                 "views": [{
  92.                     "id": "bbbBrandingHeader",
  93.                     "type": "header",
  94.                     "url": "bbb_header.png"
  95.                 }, {
  96.                     "id": "bbbBrandingLeft",
  97.                     "type": "leftTower",
  98.                     "url": "bbb_tower_left.png"
  99.                 }, {
  100.                     "id": "bbbBrandingRight",
  101.                     "type": "rightTower",
  102.                     "url": "bbb_tower_right.png"
  103.                 }, {
  104.                     "id": "bbbBrandingFooter",
  105.                     "type": "footer",
  106.                     "url": "bbb_footer.png"
  107.                 }, {
  108.                     "id": "bbbPlayer",
  109.                     "type": "smPlayerIframe",
  110.                     "files": [{
  111.                             "type": "mp4",
  112.                             "codecs": "h264,aac",
  113.                             "url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.mp4"
  114.                         },
  115.                         {
  116.                             "type": "mp4",
  117.                             "codecs": "avc1.42E01E,mp4a.40.2",
  118.                             "url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.mp4"
  119.                         },
  120.                         {
  121.                             "type": "ogv",
  122.                             "codecs": "theora,vorbis",
  123.                             "url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.ogv"
  124.                         },
  125.                         {
  126.                             "type": "flv",
  127.                             "codecs": "h264,aac",
  128.                             "url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.flv"
  129.                         }
  130.                     ]
  131.                 }, {
  132.                     "id": "bbbLeftClickArea",
  133.                     "type": "brandClickArea",
  134.                     "area": "leftTower",
  135.                     "clickParams": {
  136.                         "value": "https://peach.blender.org/"
  137.                     }
  138.                 }, {
  139.                     "id": "bbbHeaderClickArea",
  140.                     "type": "brandClickArea",
  141.                     "area": "header",
  142.                     "clickParams": {
  143.                         "value": "https://peach.blender.org/"
  144.                     }
  145.                 }, {
  146.                     "id": "bbbRightClickArea",
  147.                     "type": "brandClickArea",
  148.                     "area": "rightTower",
  149.                     "clickParams": {
  150.                         "value": "https://peach.blender.org/"
  151.                     }
  152.                 }, {
  153.                     "id": "bbbFooterClickArea",
  154.                     "type": "brandClickArea",
  155.                     "area": "footer",
  156.                     "clickParams": {
  157.                         "value": "https://peach.blender.org/"
  158.                     }
  159.                 }],
  160.             }
  161.         },
  162.         {
  163.             "id": "walle",
  164.             "type": "BrandWrapper",
  165.             "config": {
  166.                 "assetPath": "http://test-cdn.selectablemedia.com/test/a/walle/assets/img/",
  167.                 "sizeTemplate": "smallVideo",
  168.                 "views": [{
  169.                     "id": "walleBranding",
  170.                     "type": "fullBranding",
  171.                     "url": "walle_single.png"
  172.                 }, {
  173.                     "id": "wallePlayer",
  174.                     "type": "smPlayerIframe",
  175.                     "files": [{
  176.                             "type": "mp4",
  177.                             "codecs": "h264,aac",
  178.                             "url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.mp4"
  179.                         },
  180.                         {
  181.                             "type": "mp4",
  182.                             "codecs": "avc1.42E01E,mp4a.40.2",
  183.                             "url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.mp4"
  184.                         },
  185.                         {
  186.                             "type": "ogv",
  187.                             "codecs": "theora,vorbis",
  188.                             "url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.ogv"
  189.                         },
  190.                         {
  191.                             "type": "flv",
  192.                             "codecs": "h264,aac",
  193.                             "url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.flv"
  194.                         }
  195.                     ]
  196.                 }, {
  197.                     "id": "wallLeftClickArea",
  198.                     "type": "brandClickArea",
  199.                     "area": "leftTower",
  200.                     "clickParams": {
  201.                         "value": "http://movies.disney.com/wall-e/"
  202.                     }
  203.                 }, {
  204.                     "id": "walleHeaderClickArea",
  205.                     "type": "brandClickArea",
  206.                     "area": "header",
  207.                     "clickParams": {
  208.                         "value": "http://movies.disney.com/wall-e/"
  209.                     }
  210.                 }, {
  211.                     "id": "walleRightClickArea",
  212.                     "type": "brandClickArea",
  213.                     "area": "rightTower",
  214.                     "clickParams": {
  215.                         "value": "http://movies.disney.com/wall-e/"
  216.                     }
  217.                 }, {
  218.                     "id": "walleFooterClickArea",
  219.                     "type": "brandClickArea",
  220.                     "area": "footer",
  221.                     "clickParams": {
  222.                         "value": "http://movies.disney.com/wall-e/"
  223.                     }
  224.                 }]
  225.             }
  226.         }
  227.     ]
  229. }

下面是HTML

  1. <div data-bind="foreach: screens">
  2.   <div class="container" data-bind="with: config">
  3.     <div class="row" data-bind="foreach: views">    
  4.       <div class="col-md-6">
  5.         <div class="card">
  6.           <img class="card-img-top" data-bind="attr: { src: thumbnail }">
  7.           <div class="card-body">
  8.             <h5 class="card-title" data-bind="text:title"> </h5> 
  9.             <p class="card-text" data-bind="text:info"> </p>                      
  10.           </div><!-- card content -->
  11.         </div>
  12.       </div>
  13.     </div>
  14.   </div>
  15. </div>

这是错误

  1. `jquery-3.4.1.min.js:2 Uncaught ReferenceError: Unable to process binding "foreach: function(){return screens }"
  2. Message: Unable to process binding "with: function(){return config }"
  3. Message: Unable to process binding "foreach: function(){return views }"
  4. Message: Unable to process binding "attr: function(){return { src:thumbnail} }"
  5. Message: thumbnail is not defined
  6.     at attr (eval at parseBindingsString (knockout-3.5.0.js:74), <anonymous>:3:70)
  7.     at update (knockout-3.5.0.js:96)
  8.     at a.$.l (knockout-3.5.0.js:79)
  9.     at Function.xd (knockout-3.5.0.js:55)
  10.     at Function.yd (knockout-3.5.0.js:55)
  11.     at Function.ha (knockout-3.5.0.js:54)
  12.     at Object.a.o.a.$ (knockout-3.5.0.js:52)
  13.     at knockout-3.5.0.js:79
  14.     at Object.C (knockout-3.5.0.js:11)
  15.     at q (knockout-3.5.0.js:78)`

Jsfiddle来了
https://jsfiddle.net/eshans/vL74oh3m/1/

knockout.js

1条答案

按热度按时间
vc6uscn9

vc6uscn91#

在你的html中，当你不知道它是否存在时，应该在调用它之前检查它：

  1. <div data-bind="foreach: screens">
  2.   <div class="container" data-bind="with: config">
  3.     <div class="row" data-bind="foreach: views">  
  4. <!--add this line here-->
  5.     <!--ko if: typeof thumbnail !== 'undefined'-->
  6.       <div class="col-md-6">
  7.         <div class="card">
  8.           <img class="card-img-top" data-bind="attr: { src: thumbnail }">
  9.           <div class="card-body">
  10.             <h5 class="card-title" data-bind="text:title"> </h5> 
  11.             <p class="card-text" data-bind="text:info"> </p>                      
  12.           </div><!-- card content -->
  13.         </div>
  14.       </div>
  15.       <!--/ko-->
  16. <!--add this /ko here-->
  17.     </div>
  18.   </div>
  19. </div>
展开查看全部
赞(0）分享  回复(0）举报  2022-11-10
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com