knockout.jsを使用してdjangoテンプレートにテーブルを作成

Question

これはノックアウト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)); 

を、私はこのソリューションは完全に間違っているが、私はちょうど右の道に進むことかわからない、ことを知っ：私がこれまで試してみました何

誰かがそれについて私に啓発するだけですか？

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