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スクリーンショット

Answer 1

物事のカップル。

オブジェクトを直接コンソールにバインドする場合、そのオブジェクトはSearchResponseから参照する必要があります。これはviewModelの最初のプロパティであるためです。

イメージタグは通常は自己閉鎖ですが、マイナーグリプスですが、代わりにsrcを設定する必要がありますが、hrefは使用しません。

正しいマークアップになります。

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

私はあなたのデータ値は、この時点ではもう生の文字列ではありませんので、jQueryのオブジェクトにJSON文字列を解析するの世話をしますかなり確信しているので、私はfromJSを使用しなければならないと考えているマッピング・プラグインのご利用。

したがって、正しいバインド方法があります。

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 }