如何在不使用数据绑定重新加载页面的情况下刷新数据答案

【问题标题】：How to refresh the data without reloading the page using data-bind如何在不使用数据绑定重新加载页面的情况下刷新数据
【发布时间】：2013-05-15 14:42:57
【问题描述】：

我在我的 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))

如果有人能帮助我解决我的问题，我将不胜感激。提前致谢。

【问题讨论】：

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

【解决方案1】：

使用 ko.mapping 它是一个可以下载的插件，它只更新在两个状态之间发生变化的 observables，因此只有发生变化的成员才会在视图中重新渲染

【讨论】：

我已经下载了 knockout.mappings-latest.js（2.0 版）。然后将其应用到我的代码中。但我面临与之前相同的问题，即我能够在帖子中获取数据，但无法在表格中重新加载该数据。使用 ko.mappings 后，我已经更新了上面的代码......请帮助我找出哪里出错了......如果可能的话，如果有人能纠正我的代码，我会很高兴......提前致谢......