1

Knockout.jsを使用してBingAPIから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>

コンソールスクリーンショット

ここに画像の説明を入力してください

4

2 に答える 2

5

いくつかのこと。

コンソールでオブジェクトを直接バインドしている場合はSearchResponse、ビューモデルの最初のプロパティになるため、プロパティから参照する必要があります。

また、画像タグは通常、自動閉鎖、マイナーな不満ですが、href代わりに使用しないで設定する必要がありますsrc。

正しいマークアップは次のようになります。

<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/

お役に立てれば。

于 2012-04-06T02:05:56.437 に答える
1

imgタグはsrcの代わりに使用しhrefます。あなたがしたいattr: { src: Thumbnail.Url }

于 2012-04-06T01:57:27.790 に答える