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

populate table in django template using knockout.js

本文关键字：knockout js 填充 表格 django      更新时间：2023-09-26

这是我第一次尝试我的手在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)

我想使用这个响应来填充context['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));

我知道这个解决方案是完全错误的，但我只是不确定如何在正确的道路上进行，有人能告诉我吗?

下面展示了当您从服务器获得数据时(您可以使用Ajax)如何在knockout中将数据填充为表。

示例: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 ());
相关文章：