我有以下视图和脚本:
@{
ViewBag.Title = "Games";
}
<h2>Games</h2>
<table class="table-bordered">
<thead>
<tr>
<th>Course</th>
<th>Date</th>
<th>Player</th>
<th>Hole 1</th>
<th>Hole 2</th>
<th>Hole 3</th>
<th>Hole 4</th>
<th>Hole 5</th>
<th>Hole 6</th>
<th>Hole 7</th>
<th>Hole 8</th>
<th>Hole 9</th>
</tr>
</thead>
<tbody data-bind="foreach: GameList">
<tr>
<td data-bind="text: CourseName"></td>
<td data-bind="text: Date"></td>
</tr>
<!-- ko foreach: GameEntry -->
<tr>
<td></td>
<td></td>
<td data-bind="text:PlayerName"></td>
<td data-bind="text:HoleOneScore"></td>
<td data-bind="text:HoleTwoScore"></td>
<td data-bind="text:HoleThreeScore"></td>
<td data-bind="text:HoleFourScore"></td>
<td data-bind="text:HoleFiveScore"></td>
<td data-bind="text:HoleSixScore"></td>
<td data-bind="text:HoleSevenScore"></td>
<td data-bind="text:HoleEightScore"></td>
<td data-bind="text:HoleNineScore"></td>
</tr>
<!-- /ko -->
</tbody>
</table>
<script>
function Game(data){
var self = this;
self.CourseName = ko.observable(data.CourseName);
self.Date = ko.observable(data.Date);
self.GameEntries = ko.observableArray([]);
}
function GameEntry(data){
var self = this;
self.PlayerName = ko.observable(data.PlayerName);
self.HoleOneScore = ko.observable(data.HoleOneScore);
self.HoleTwoScore = ko.observable(data.HoleTwoScore);
self.HoleThreeScore = ko.observable(data.HoleThreeScore);
self.HoleFourScore = ko.observable(data.HoleFourScore);
self.HoleFiveScore = ko.observable(data.HoleFiveScore);
self.HoleSixScore = ko.observable(data.HoleSixScore);
self.HoleSevenScore = ko.observable(data.HoleSevenScore);
self.HoleEightScore = ko.observable(data.HoleEightScore);
self.HoleNineScore = ko.observable(data.HoleNineScore);
}
function ViewModel() {
var self = this;
self.GameList = ko.observableArray([]);
$.getJSON("/Games/GetGames", function (allData) {
var mappedTasks = $.map(allData, function (item) { return new Game(item) });
//console.log(mappedTasks);
self.GameList(mappedTasks);
});
}
$(document).ready(function () {
ko.applyBindings(new ViewModel());
});
</script>
但是,当我尝试绑定我的数据时,如下所示:
{
"CourseName": "Green Hills",
"Date": "2013-04-02T16:33:21.943",
"GameEntries": [
{
"PlayerName": "Chris Camp",
"HoleOneScore": 4,
"HoleTwoScore": 5,
"HoleThreeScore": 6,
"HoleFourScore": 3,
"HoleFiveScore": 4,
"HoleSixScore": 4,
"HoleSevenScore": 4,
"HoleEightScore": 5,
"HoleNineScore": 3
}
]
},
{
"CourseName": "Green Hills",
"Date": "2015-05-01T13:08:41.783",
"GameEntries": []
},
{
"CourseName": "Green Hills",
"Date": "2015-05-01T13:13:45.34",
"GameEntries": [
{
"PlayerName": "Chris Camp",
"HoleOneScore": 4,
"HoleTwoScore": 3,
"HoleThreeScore": 4,
"HoleFourScore": 7,
"HoleFiveScore": 5,
"HoleSixScore": 2,
"HoleSevenScore": 1,
"HoleEightScore": 4,
"HoleNineScore": 6
}
]
}
我遇到了这个错误:
Uncaught ReferenceError: Unable to process binding "foreach: function (){return GameEntry }"
Message: Unable to process binding "text: function (){return PlayerName }"
Message: PlayerName is not defined
我认为这是因为没有填充GameList&gt; Game observable的GameEntries数组。将这种类型的JSON输出绑定到视图模型的正确方法是什么?
答案 0 :(得分:2)
我看到了一些要改变的事情
<!-- ko foreach: GameEntries -->
和
function Game(data) {
var self = this;
self.CourseName = ko.observable(data.CourseName);
self.Date = ko.observable(data.Date);
var entries = $.map(data.GameEntries, function (entry) {
return new GameEntry(entry);
});
self.GameEntries = ko.observableArray(entries);
}
看看这个JSFiddle http://jsfiddle.net/efpx08ta/2/
答案 1 :(得分:1)
<!-- ko foreach: GameEntry -->
应该是
<!-- ko foreach: GameEntries -->
绑定到属性,而不是类型。