如何刷新数据而不使用data-bind重新加载页面

时间:2013-05-15 14:42:58

标签: data-binding python-2.7 knockout.js django-views

我在我的django项目中使用knockout.js并且在javascript中的post方法有问题。我试图重新绑定或重新初始化列表,但它没有用。

例如:我正在显示包含10行的表格数据。我希望点击按钮我得到另外5行的数据,并希望在不重新加载页面的情况下在表格上重新加载该数据。

有没有人知道解决方案..下面是我的knockout.js,html和view.py页面的代码:

的javascript:

function makeShowObjectList(model, d_url, no_num, detail_per_page, b, fruit) {
var showobjectList = ko.observableArray([]);


 $.post(d_url, data, function (response_data) {
                // here we have applied code to set new data in showobjectList
                if (!showobjectList.is_ready)
                {   

                   //Here we are trying to relaod the list on the page but did'nt work
                    FViewModel.showobjectList=showobjectList;
                     showobjectList.is_ready = true;
                    showobjectList.onready();
                    ko.mapping.fromJSshowobjectList, {}, self); }
                }
            }, 'json');

}
function fruitFilterItem( n, i ) {
    this.n = n;
    this.i   = i;
}
var FViewModel=function(c_data)
{
    var self = this;
    self.abc= ko.observable(null);
        this.optionsText = ko.observable();
        this.fruitFilter = ko.observableArray([
        new fruitFilterItem( "Mango", 2 ),
        new fruitFilterItem( "Banana", 1 ),
        new fruitFilterItem( "Grapes", 3 )
    ]);
    this.selectedfruit = ko.observable();
    this.VegeFilter = ko.observableArray([
        new fruitFilterItem( "Tomato", "Tomato" ),
        new fruitFilterItem( "Patato", "Patato" ),
        new fruitFilterItem( "Onion", "Onion" ),

    ]);
    this.selectedVege = ko.observable();

    self.showtList = makeShowObjectList(BucketViewModel, urls.get_fruit_info, self.fruit_page, self.num_fruit, self.bbq, 

self.selectedfruit());
        self.setShowType = function(d, ele) {
        this.get_updates = function () {
        ko.mapping.fromJS(searchList(), self);};


          self.showtList = makeShowObjectList(BucketViewModel, urls.get_fruit_info, self.fruit_page, self.num_fruit, self.b,  self.selectedfruit()); 
         self.showtList();


    }

 self.ShowmessageList = function () {
        return self.showtList;
    }


}

HTML:

<script>
VarModel = new FViewModel(c_data);
$(function() {
       function get_updates () {
       $.getJSON('/new-lines.json', function(c_data) {
       var VarModel = ko.mapping.fromJS(choices_data);

           ko.applyBindings(VarModel );


             });

} ko.applyBindings(VarModel);

</script>
<body>
<select id="fruit" name="fruit"  style="width:200px;" data-bind = "   
        value: selectedfruit,
        options:        fruitFilter,
        optionsText:    'n', 
        optionsValue:   'i',   
        optionsCaption: 'Select a fruit'
    ">

        </select>

        <select style="width:180px;" data-bind = "   
        value: selectedVege,
        options:        VegeFilter,
        optionsText:    'n', 
        optionsValue:   'i',   
        optionsCaption: 'Select a Vege'
    ">
               //这里我们正在展示我们的专栏            
</body>

Views.py:

def urls.get_fruit_info(request):

      //we are calculating the page_object here

      response_object = {
        'page': page_object,
        'no_not': FruitRecipient.objects.filter(user=request.member, add_at=None).count()
      }
      return HttpResponse(simplejson.dumps(response_object, indent=3))

如果有人帮我解决问题,我将感激不尽。 提前谢谢。

1 个答案:

答案 0 :(得分:0)

使用ko.mapping它可以下载的插件,它只更新两个状态之间已更改的可观察对象,因此只有已更改的成员才会在视图中重新呈现