javascript - 在 knockoutjs 中将 JSON 与表绑定

Question

如何将我的 json 对象与 knockoutjs 绑定，这是我的 json：

 "{\"Sport\":[{\"Name\":\"nana\",\"Description\":\"lmkmsdqd\",\"EndDate\":\"2012-07-22T00:00:00\"},
              {\"Name\":\"sfqsdffqf\",\"Description\":\"lkqjskdlqsd\",\"EndDate\":\"2012-07-22T00:00:00\"}],
    \"Music\":[{\,\"Name\":\"nana\",\"Description\":\"lmkmsdqd\",\"EndDate\":\"2012-07-22T00:00:00\"},
               {\"Name\":\"sfqsdffqf\",\"Description\":\"lkqjskdlqsd\",\"EndDate\":\"2012-07-22T00:00:00\"}]}"

请建议我如何绑定它！

Answer 1

好的，所以我整理了一个粗略的小提琴来演示一些绑定概念，以及 ViewModel 构造。我必须清理你的 JSON 才能做到这一点。它演示了模板、foreach 和文本绑定。如果您还没有这样做，我强烈建议您阅读淘汰赛网站上的教程。

以下是 HTML 绑定：

Sports
<ul data-bind="template: { name: 'listingTemplate', foreach: sports}"></ul>
</br>
Music
<ul data-bind="template: { name: 'listingTemplate', foreach: music}"></ul>

<script type="text/html" id="listingTemplate">
<li>
    <span data-bind="text: name"></span></br>
    <span data-bind="text: description"></span></br>
    <span data-bind="text: endDate"></span></br></br>
</li>
</script>​

和视图模型：

var Listing = function(data) {
    this.name = ko.observable(data.Name || '');
    this.description = ko.observable(data.Description|| '');
    this.endDate = ko.observable(data.EndDate|| '');
};

var ViewModel = function(data) {
    this.sports = ko.observableArray(
        ko.utils.arrayMap(data.Sport, function(i) {return new Listing(i);})
    );
    this.music = ko.observableArray(
        ko.utils.arrayMap(data.Music, function(i) {return new Listing(i);})
    );
};