-1

ノックアウト js マッピング プラグインを使用して、サーバー側から受信した json 配列応答をビューにバインドするにはどうすればよいですか? データはここで示したとおりに受信され、サーバーが返すものを変更する制御はありません。これが私の JSFiddle です。

以下に示すように私のコード：

Javascript

var data =
[{"street":"2532 Falkark Dr", "lat":"39.926295", "lng":"-86.012919", "zipcode":"92256"},       {"street":"8558 Appleby Ln", "lat":"39.922742", "lng":"-86.017637", "zipcode":"92256"},{"street":"8537 Rock Hollow Car", "lat":"39.916740", "lng":"-86.017043", "zipcode":"92256"},{"street":"8882 Powderhorn Way", "lat":"39.923866", "lng":"-86.012018", "zipcode":"92256"},{"street":"8820 Starrup Ct", "lat":"39.915676", "lng":"-86.023990", "zipcode":"92256"},{"street":"8545 Woodstone Ct", "lat":"39.915650", "lng":"-86.017014", "zipcode":"92256"},{"street":"8830 Burwack Dr", "lat":"39.924993", "lng":"-86.013454", "zipcode":"92256"},{"street":"8613 Appleby Ln", "lat":"39.921938", "lng":"-86.016539", "zipcode":"92256"},{"street":"8722 Gunpowder Ct", "lat":"39.916807", "lng":"-86.014584", "zipcode":"92256"},{"street":"7888 Beanblossom Car", "lat":"39.904030", "lng":"-86.029995", "zipcode":"92256"},{"street":"2172 Hadway Dr", "lat":"39.921560", "lng":"-86.017160", "zipcode":"92256"},{"street":"2118 Hardwood Ct", "lat":"39.920002", "lng":"-86.046934", "zipcode":"92250"},{"street":"8116 Teel Way", "lat":"39.903596", "lng":"-86.021409", "zipcode":"92256"},{"street":"8232 Castle Farms Rd", "lat":"39.907012", "lng":"-86.026124", "zipcode":"92256"},{"street":"2473 Colony Poante East Dr", "lat":"39.925350", "lng":"-86.049030", "zipcode":"92250"},{"street":"2302 Andaron Ct", "lat":"39.922920", "lng":"-86.048216", "zipcode":"92250"},{"street":"8135 Summertree Ct", "lat":"39.911729", "lng":"-86.024716", "zipcode":"92256"},{"street":"8626 Kruggle Ct", "lat":"39.914703", "lng":"-86.016291", "zipcode":"92256"},{"street":"8475 Wakefaeld Ct", "lat":"39.910430", "lng":"-86.032006", "zipcode":"92256"},{"street":"2416 Haddangton Dr W", "lat":"39.924718", "lng":"-86.015856", "zipcode":"92256"},{"street":"8461 Praarie Dr", "lat":"39.909595", "lng":"-86.026840", "zipcode":"92256"},{"street":"8328 Praarie Dr", "lat":"39.908163", "lng":"-86.026972", "zipcode":"92256"},{"street":"7251 Sprangwater Dr W", "lat":"39.900045", "lng":"-86.026943", "zipcode":"92256"},{"street":"2171 Andaron Dr", "lat":"39.921336", "lng":"-86.048979", "zipcode":"92250"},{"street":"8613 Quarterhorse Dr", "lat":"39.913344", "lng":"-86.023906", "zipcode":"92256"},{"street":"8812 Champaons Dr", "lat":"39.915806", "lng":"-86.022538", "zipcode":"92256"},{"street":"8556 Honeysuckle Way", "lat":"39.912083", "lng":"-86.019654", "zipcode":"92256"},{"street":"8475 Summertree Ln", "lat":"39.911031", "lng":"-86.026843", "zipcode":"92256"},{"street":"8511 Castle Radge Ln", "lat":"39.910708", "lng":"-86.030860", "zipcode":"92256"},{"street":"8112 Stonebranch East Dr", "lat":"39.903251", "lng":"-86.029115", "zipcode":"92256"}]



function ViewModel() {
var self = this;
self.addresses = ko.observableArray([]); 
    ko.mapping.fromJS(data, {}, self.addresses);

}

var viewModel = new ViewModel();

//function binding work order details to view
$(document).ready(function () {
    ko.applyBindings(viewModel);
});

HTML

<h3>Knocked Out</h3>
<table class="table table-condensed">

<thead>
<tr>
<th class="span2">Address</th>
<th class="span1">Latitude</th>
<th class="span3">Longitude</th>
<th class="span3">Zip Code</th>
</tr>
</thead>

<tbody data-bind="foreach: addresses">
<tr>
<td data-bind="text: street"></td>
 <td data-bind="text: lat"></td>
 <td data-bind="text: lng"></td>
 <td data-bind="text: zipcode"></td>
 </tr>
 </tbody>
 </table>

どんな助けでも大歓迎です。

4

1 に答える 1

2

私はあなたのフィドルを実行し、コンソールでこれを見ました:

Uncaught ReferenceError: $ is not defined

これは、フィドルに jQuery への参照を追加することで簡単に修正できます。その後、すべてが適切にバインドされているようです。

更新されたフィドル: http://jsfiddle.net/r2Ajr/3/

于 2013-05-18T02:45:38.963 に答える