Knockout JS 循环遍历大型 JSON 对象，在控制台中出现未定义的错误

Question

我有以下 JSON 对象，其中包含循环的淘汰代码，我得到一组特定的结果并显示它们。它正在渲染，但它说有一个错误。我不确定为什么。任何人都可以看看它吗？提前谢谢你

    var json = {
    "available": true,
    "screens": [{
            "id": "s01",
            "type": "Selector",
            "config": {
                "views": [{
                    "id": "sintel",
                    "type": "selectorItem",
                    "thumbnail": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/img/thumb_sintel.png",
                    "title": "Sintel",
                    "description": "Small video. HTML5, native controls, start poster. Bottom, right social. Video + grid",
                    "info": "00:51"
                }, {
                    "id": "bbb",
                    "type": "selectorItem",
                    "thumbnail": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/img/thumb_bbb.png",
                    "title": "Big Buck Bunny",
                    "description": "Large video. HTML5, custom controls, social hover. Video + replay",
                    "info": "00:33"
                }, {
                    "id": "walle",
                    "type": "selectorItem",
                    "thumbnail": "http://test-cdn.selectablemedia.com/test/a/walle/assets/img/thumb_walle.png",
                    "title": "WALL-E",
                    "description": "Small video. Youtube, custom controls. Left social. Video + carousel.",
                    "info": "02:30"
                }]
            }
        },
        {
            "id": "sintel",
            "type": "BrandWrapper",
            "config": {
                "views": [{
                    "id": "sintelBranding",
                    "type": "fullBranding",
                    "url": "sintel_single.png"
                }, {
                    "id": "sintelPlayer",
                    "type": "smPlayerIframe",
                    "files": [{
                            "type": "mp4",
                            "codecs": "h264,aac",
                            "url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.mp4"
                        },
                        {
                            "type": "mp4",
                            "codecs": "avc1.42E01E,mp4a.40.2",
                            "url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.mp4"
                        },
                        {
                            "type": "ogv",
                            "codecs": "theora,vorbis",
                            "url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.ogv"
                        },
                        {
                            "type": "flv",
                            "codecs": "h264,aac",
                            "url": "http://test-cdn.selectablemedia.com/test/a/sintel/assets/video/sintel_trailer-1080p.flv"
                        }
                    ]
                }, {
                    "id": "sintelLeftClickArea",
                    "type": "brandClickArea",
                    "area": "leftTower",
                    "clickParams": {
                        "value": "https://durian.blender.org/"
                    }
                }, {
                    "id": "sintelHeaderClickArea",
                    "type": "brandClickArea",
                    "area": "header",
                    "clickParams": {
                        "value": "https://durian.blender.org/about/"
                    }
                }, {
                    "id": "sintelFooterClickArea",
                    "type": "brandClickArea",
                    "area": "footer",
                    "clickParams": {
                        "value": "https://durian.blender.org/gallery/"
                    }
                }]
            }
        },
        {
            "id": "bbb",
            "type": "BrandWrapper",
            "config": {
                "views": [{
                    "id": "bbbBrandingHeader",
                    "type": "header",
                    "url": "bbb_header.png"
                }, {
                    "id": "bbbBrandingLeft",
                    "type": "leftTower",
                    "url": "bbb_tower_left.png"
                }, {
                    "id": "bbbBrandingRight",
                    "type": "rightTower",
                    "url": "bbb_tower_right.png"
                }, {
                    "id": "bbbBrandingFooter",
                    "type": "footer",
                    "url": "bbb_footer.png"
                }, {
                    "id": "bbbPlayer",
                    "type": "smPlayerIframe",
                    "files": [{
                            "type": "mp4",
                            "codecs": "h264,aac",
                            "url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.mp4"
                        },
                        {
                            "type": "mp4",
                            "codecs": "avc1.42E01E,mp4a.40.2",
                            "url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.mp4"
                        },
                        {
                            "type": "ogv",
                            "codecs": "theora,vorbis",
                            "url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.ogv"
                        },
                        {
                            "type": "flv",
                            "codecs": "h264,aac",
                            "url": "http://test-cdn.selectablemedia.com/test/a/bbb/assets/video/bbb_trailer_1080p.flv"
                        }
                    ]
                }, {
                    "id": "bbbLeftClickArea",
                    "type": "brandClickArea",
                    "area": "leftTower",
                    "clickParams": {
                        "value": "https://peach.blender.org/"
                    }
                }, {
                    "id": "bbbHeaderClickArea",
                    "type": "brandClickArea",
                    "area": "header",
                    "clickParams": {
                        "value": "https://peach.blender.org/"
                    }
                }, {
                    "id": "bbbRightClickArea",
                    "type": "brandClickArea",
                    "area": "rightTower",
                    "clickParams": {
                        "value": "https://peach.blender.org/"
                    }
                }, {
                    "id": "bbbFooterClickArea",
                    "type": "brandClickArea",
                    "area": "footer",
                    "clickParams": {
                        "value": "https://peach.blender.org/"
                    }
                }],
            }
        },
        {
            "id": "walle",
            "type": "BrandWrapper",
            "config": {
                "assetPath": "http://test-cdn.selectablemedia.com/test/a/walle/assets/img/",
                "sizeTemplate": "smallVideo",
                "views": [{
                    "id": "walleBranding",
                    "type": "fullBranding",
                    "url": "walle_single.png"
                }, {
                    "id": "wallePlayer",
                    "type": "smPlayerIframe",
                    "files": [{
                            "type": "mp4",
                            "codecs": "h264,aac",
                            "url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.mp4"
                        },
                        {
                            "type": "mp4",
                            "codecs": "avc1.42E01E,mp4a.40.2",
                            "url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.mp4"
                        },
                        {
                            "type": "ogv",
                            "codecs": "theora,vorbis",
                            "url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.ogv"
                        },
                        {
                            "type": "flv",
                            "codecs": "h264,aac",
                            "url": "http://test-cdn.selectablemedia.com/test/a/walle/assets/video/wall-e-trailer-3_9_1280x544.flv"
                        }
                    ]
                }, {
                    "id": "wallLeftClickArea",
                    "type": "brandClickArea",
                    "area": "leftTower",
                    "clickParams": {
                        "value": "http://movies.disney.com/wall-e/"
                    }
                }, {
                    "id": "walleHeaderClickArea",
                    "type": "brandClickArea",
                    "area": "header",
                    "clickParams": {
                        "value": "http://movies.disney.com/wall-e/"
                    }
                }, {
                    "id": "walleRightClickArea",
                    "type": "brandClickArea",
                    "area": "rightTower",
                    "clickParams": {
                        "value": "http://movies.disney.com/wall-e/"
                    }
                }, {
                    "id": "walleFooterClickArea",
                    "type": "brandClickArea",
                    "area": "footer",
                    "clickParams": {
                        "value": "http://movies.disney.com/wall-e/"
                    }
                }]
            }
        }
    ]

}

下面是HTML

<div data-bind="foreach: screens">
  <div class="container" data-bind="with: config">
    <div class="row" data-bind="foreach: views">    
      <div class="col-md-6">
        <div class="card">
          <img class="card-img-top" data-bind="attr: { src: thumbnail }">
          <div class="card-body">
            <h5 class="card-title" data-bind="text:title"> </h5> 
            <p class="card-text" data-bind="text:info"> </p>                      
          </div><!-- card content -->
        </div>
      </div>
    </div>
  </div>
</div>

这里是错误

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

Jsfiddle 来了

https://jsfiddle.net/eshans/vL74oh3m/1/

Answer 1

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

<div data-bind="foreach: screens">
  <div class="container" data-bind="with: config">
    <div class="row" data-bind="foreach: views">  
<!--add this line here-->
    <!--ko if: typeof thumbnail !== 'undefined'-->
      <div class="col-md-6">
        <div class="card">
          <img class="card-img-top" data-bind="attr: { src: thumbnail }">
          <div class="card-body">
            <h5 class="card-title" data-bind="text:title"> </h5> 
            <p class="card-text" data-bind="text:info"> </p>                      
          </div><!-- card content -->
        </div>
      </div>
      <!--/ko-->
<!--add this /ko here-->
    </div>
  </div>
</div>

Knockout JS 循环遍历大型 JSON 对象，在控制台中出现未定义的错误

Knockout JS looping over large JSON object, getting an undefined error in console

javascript

jquery

knockout.js