Jquery 循环遍历敲除中的数组并绑定到HTML
我对淘汰赛不太熟悉,但现在是作为速成班来学习的。我的任务是循环这个JSON对象,并将某些节点放入div中,并给出结果。它基本上是一个视频卡显示,每种类型、信息、缩略图和标题中都会显示特定的信息位。然后,我将不得不加载一个视频播放器缩略图点击,但这是稍后。对于像我这样的新手,任何帮助都将不胜感激。只是没有定义 这是我的JSON对象。我走的方向对吗Jquery 循环遍历敲除中的数组并绑定到HTML,jquery,knockout.js,Jquery,Knockout.js,我对淘汰赛不太熟悉,但现在是作为速成班来学习的。我的任务是循环这个JSON对象,并将某些节点放入div中,并给出结果。它基本上是一个视频卡显示,每种类型、信息、缩略图和标题中都会显示特定的信息位。然后,我将不得不加载一个视频播放器缩略图点击,但这是稍后。对于像我这样的新手,任何帮助都将不胜感激。只是没有定义 这是我的JSON对象。我走的方向对吗 var json= { "available": true, "screens": [{ "id": "s01"
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/"
}
}]
}
}
]
}
下面是一些我试图编写的淘汰代码,但它没有定义。我知道这很愚蠢:(.只是想注销,这样我就可以开始做这个任务了
var PageViewModel = function (json) {
var self = this;
self.screens = ko.observableArray([]);
self.addSection = function (jsonobj) {
console.log("jsonobj", jsonobj);
self.screens.push(new my.VideoSection(jsonobj));
console.log(self.screens());
}
for (var i = 0; i < json.screens.length; i++) {
self.addSection(json.screens[i]);
}
};
return {
pageViewModel: pageViewModel
}
var PageViewModel=function(json){
var self=这个;
self.screens=ko.observearray([]);
self.addSection=函数(jsonobj){
log(“jsonobj”,jsonobj);
self.screens.push(新的my.VideoSection(jsonobj));
console.log(self.screens());
}
for(var i=0;i
我的html只是开始循环
<div data-bind="foreach: screens">
<div class="container">
<div class="row">
<div class="col-md-6 ">
<div class="card">
<div class="card-image">
<div class="embed-responsive embed-responsive-16by9">
</div>
</div><!-- card image -->
<div class="card-content">
<span class="card-title" data-bind="text:title"> </span>
<span class="card-title" data-bind="text:thumbnail"> </span>
<span class="card-title" data-bind="text:info"> </span>
</div><!-- card content -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 ">
<div class="card">
<div class="card-image">
<div class="embed-responsive embed-responsive-16by9">
</div>
</div><!-- card image -->
<div class="card-content">
<span class="card-title" data-bind="text:title"> </span>
<span class="card-title" data-bind="text:thumbnail"> </span>
<span class="card-title" data-bind="text:info"> </span>
</div><!-- card content -->
</div>
</div>
</div>
</div>
</div>
您似乎走上了正确的道路。有几件事需要注意:
- 您没有发布
构造函数的代码my.VideoSection
- 您正确地循环了
,但是屏幕
对象有一个屏幕
属性,该属性有一个config
数组,您也需要循环。您可以使用代码>绑定视图
<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>
小提琴:
非常感谢@brother woodrow。它正在渲染,但在浏览器中奇怪地出现了此错误。未捕获引用错误:无法处理绑定“foreach:function(){return screens}”消息:无法处理绑定“with:function(){return config}”消息:无法处理绑定“foreach:function(){return views}”消息:无法处理绑定“attr:function(){return{src:thumbnail}}”消息:thumbnail没有定义,所以我现在理解了原因。JSON对象还有很多,在某种程度上循环失败了。现在我迷路了,哈哈。如果还有其他提示,我们将不胜感激,并感谢您的帮助!