Question

如何使用knockout js mapping插件将从服务器端接收的json数组响应绑定到视图？完全按照我在这里显示的那样接收数据，我没有任何控制来改变服务器返回的内容。 Here是我的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>

非常感谢任何帮助。

Answer 1

我跑完你的小提琴，在控制台里看到了这个：

Uncaught ReferenceError: $ is not defined

通过在小提琴中添加对jQuery的引用可以很容易地解决这个问题。然后一切似乎都得到了妥善的约束。

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

如何绑定JSON数组以使用knockout js mapping插件进行查看

1 个答案: