绑定JSON在knockoutjs

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

好了，所以我放在一起粗fiddle展示一些有约束力的概念，以及视图模型建设。我不得不清理你的JSON来做到这一点。它演示模板，foreach和文本绑定。如果您还没有这样做，我强烈建议您通过tutorials on the knockout site。

这里是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>​ 

和的ViewModels：

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);}) 
    ); 
};