如何使用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>

CONSOLE SCREENSHOT

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/

希望这有帮助。

Answer 2

img代码使用src代替href。您可能希望attr: { src: Thumbnail.Url }