如何使用Knockout.js foreach绑定迭代此JSON视图模型？

我试图从Bing API使用Knockout.js访问JSON响应。下面是我的javascript代码和我在html中使用的相应Knockoutjs绑定。我还包括了我试图访问的对象的屏幕截图。从对象我需要得到Thumbnail.Url并将该值分配给页面上的HREF属性。有人可以发现我做错了什么吗？我认为这个问题可能在我的attr绑定中。如何使用Knockout.js foreach绑定迭代此JSON视图模型？

function bindModel(data) { 
var viewModel = ko.mapping.fromJSON(data); 
ko.applyBindings(viewModel); 

} 

$.ajax({ 
       url: fullUri, 
       type: 'post', 
       dataType: 'jsonp', 
       jsonp: true, 
       jsonpCallback: 'searchDone', 
       success: function(data, textStatus, jqXHR){ 
        console.log(data); 
        bindModel(data); 
       } 
})

HTML

<ul class="thumbnails" data-bind="foreach: Image.Results"> 
    <li class="span2"><img data-bind="attr: {href: Thumbnail.Url}"></img></li> 
    </ul>

CONSOLE屏幕截图

enter image description here

来源

2012-04-06 hughesdan

几件事情。

如果您直接绑定控制台中的对象，则需要从属性SearchResponse引用，因为这将是viewModel中的第一个属性。

另外一个图片标签通常是自动关闭，小抱怨，但它不会使用href，而应该设置为src。

正确的标记是。

<ul class="thumbnails" data-bind="foreach: SearchResponse.Image.Results"> 
    <li class="span2"><img data-bind="attr: {src: Thumbnail.Url}" /></li> 
</ul>

您使用映射插件我认为应该使用fromJS，因为我敢肯定，那么你的数据值不是原始字符串不再在这一点jQuery将采取解析JSON字符串对象的护理。

因此，正确的绑定方法是。

function bindModel(data) { 
    viewModel = ko.mapping.fromJS(data); 
    console.log(viewModel); 
    ko.applyBindings(viewModel); 
}

这是小提琴。

http://jsfiddle.net/madcapnmckay/udDGP/

希望这会有所帮助。

来源

2012-04-06 02:05:56 madcapnmckay

瑞安打字员比我看起来快得多:) – madcapnmckay 2012-04-06 02:07:04

完美！非常感谢。和你的jsfiddle中的欢闹的'hammah时间'猫+1。 – hughesdan 2012-04-06 02:12:49

+1为hammah时间 – 2012-04-06 02:41:04

img标签使用src，而不是href。你会想要做attr: { src: Thumbnail.Url }

来源

2012-04-06 01:57:27

谢谢。接得好。不幸的是，这似乎并不是导致Knockoutjs不能绑定Thumbnail.URL的原因。我在想“Thumbnail.Url”在某种程度上是错误的。 – hughesdan 2012-04-06 02:02:49

很高兴你能工作。我想知道你是否在'with'中使用'SearchResponse'，我们没有看到。 – 2012-04-06 02:38:14

如何使用Knockout.js foreach绑定迭代此JSON视图模型？

回答

相关问题