在django模板中使用knockout.js填充表格

Question

這是我第一次嘗試使用Knockout javascript。我非常天真，所以請原諒我的問題。

我有一個視圖，它給出了JSON響應。

views.py

def get(self, request, code, format=None): 
     data = self.get_details(code) 
     paginator = Paginator(data, self.paginate_by) 
     page = request.GET.get('page', 1) 
     context = {} 
     try: 
      data_sent = paginator.page(page) 
     except PageNotAnInteger: 
     # If page is not an integer, deliver first page. 
      data_sent = paginator.page(1) 
     except EmptyPage: 
     # If page is out of range (e.g. 9999), deliver last page of results. 
      data_sent = paginator.page(paginator.num_pages) 
     context['data'] = self.get_user(chain_code)   
     context['page_object'] = data_sent.object_list 
     context['code'] = code 
     data = json.dumps(context, cls=DjangoJSONEncoder) 
     return HttpResponse(data) 

我想在我的Django的模板，像這樣使用該響應來填充情境[ '數據']在表：

Id Name Status 

1 xyz 1 
2 abc 2 

datalist.html

<script src="{% static "jsscript/datalist.js" %} "></script> 

     <div class = "container"> 
      <div class = "page-header"> 


<!---all headers data ---> 
     </div> 
     <div class="tab-content"> 
      <table class="table table-bordered listingtable" > 
       <thead> 
        <tr> 
         <th style="width: 10%;">Id</th> 
         <th style="width: 10%;">Name</th> 
         <th style="width: 20%;">Status</th> 
        </tr> 
        </thead>  

       <tbody> 
       <!----script to populate table---> 

      </tbody> 
     </table> 

我已經經歷了knockout.js的官方教程，但我不確定如何從我的API訪問響應並填充模板中的表。

我迄今爲止嘗試：

datalist.js

var ViewModel = function(data) { 
    var self = this; 
    self.Id = ko.observable(data.id); 
    self.Name = ko.observable(data.name); 
    self.status = ko.observable(data.status); 
}; 

ko.applyBindings(new ViewModel(data)); 

我知道這個解決方案是完全錯誤的，但我只是不知道如何在正確的道路前進，CAN有人只是啓發我呢？

Answer 1

下面顯示瞭如何在從服務器獲取數據（可能使用Ajax）時將數據填充爲表中的數據。

實施例：https://jsfiddle.net/kyr6w2x3/108/

HTML：

<table class="table table-bordered listingtable" > 
    <thead> 
     <tr> 
     <th >Id</th> 
     <th>Name</th> 
     <th>Status</th> 
     </tr> 
    </thead>  
    <tbody data-bind="foreach:YourArrayList"> 
     <tr> 
     <td data-bind="text:Id"></td> 
     <td data-bind="text:Name"></td> 
     <td data-bind="text:Status"></td> 
     </tr>     
    </tbody> 
    </table> 

JS：

var yourData = [{id:1,name:"AAA" ,status:"AAA-status" },{id:2,name:"BBB" ,status:"BBB-status" },{id:3,name:"CCC" ,status:"CCC-status" }]; 

var MainViewModel = function() { 
    var self = this; 
    self.YourArrayList= ko.observableArray(); 
    self.YourArrayList($.map(yourData, function (item) { 
      return new StatusItemViewModel (item); 
     })); 
}; 
var StatusItemViewModel = function(data) { 
    var self = this; 
    self.Id = ko.observable(data.id); 
    self.Name = ko.observable(data.name); 
    self.Status = ko.observable(data.status); 
}; 

ko.applyBindings(new MainViewModel());