将父数据和子数据绑定到knockout可观察数组

时间:2015-05-06 20:18:08

标签: knockout.js

我有以下视图和脚本:

@{
    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输出绑定到视图模型的正确方法是什么?

2 个答案:

答案 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 -->

绑定到属性,而不是类型。