2013-05-18 88 views
-1

,以查看我怎樣才能結合來自服務器側接收到利用敲除JS映射插件視圖中的JSON陣列響應?。收到的數據與我在這裏顯示的完全一致,但我沒有任何控制權來更改服務器返回的內容。 Here是我的JSFiddle。如何綁定JSON數組使用基因敲除的js映射插件

我的代碼,如下所示:

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

任何幫助的高度讚賞。

+2

http://jsfiddle.net/sdTGn/我不同意你的代碼得到了問題,你可以在你想要做什麼詳細點嗎?此外,JSON是用於序列化數組的數據交換格式,您在代碼中擁有的僅僅是一個JavaScript數組對象。 –

+0

我試圖做同樣的我有什麼東西在這裏:http://jsfiddle.net/shen747/YQXY4/。但用一個JSON數組來代替。 – msrameshp

回答

2

我跑你的小提琴,在控制檯中看到這一點:

Uncaught ReferenceError: $ is not defined 

這是很容易通過增加在小提琴的jQuery參考糾正。然後,一切似乎都妥當。

更新小提琴:http://jsfiddle.net/r2Ajr/3/

+0

非常感謝它的工作;-)。 – msrameshp