1

我正在尝试使用 Knockout.js 从 Bing API 访问 JSON 响应。下面是我在 html 中使用的 javascript 代码和相应的 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>

控制台屏幕截图

在此处输入图像描述

4

2 回答 2

5

几件事。

如果您直接在控制台中绑定对象，那么您将需要从该属性中引用，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-06T02:05:56.437 回答
1

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

于 2012-04-06T01:57:27.790 回答