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

Question

我正在尝试使用Knockout.js从Bing API访问JSON响应.下面是我的javascript代码和我在html中使用的相应的Knockoutjs绑定.我还包括了我正在尝试访问的对象的屏幕截图.从我需要获取Thumbnail.Url的对象,并将该值分配给页面上的HREF属性.有人能发现我做错了吗？我认为这个问题可能出现在我的attr绑定中.

JS

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>

控制台屏幕

Answer 1

几件事.

如果直接绑定控制台中的对象,则需要从属性引用,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/

希望这可以帮助.