Data binding 如何使用数据绑定在不重新加载页面的情况下刷新数据
我在django项目中使用knockout.js,在javascript的post方法中遇到问题。我试图重新绑定或重新初始化列表,但没有成功 例如:我正在显示10行的表格数据。我想点击按钮,我得到另一个5行的数据,并希望在表格中重新加载该数据,而不重新加载页面 有人知道解决办法吗。。下面是我的knockout.js、html和view.py页面代码: javascript:Data binding 如何使用数据绑定在不重新加载页面的情况下刷新数据,data-binding,python-2.7,knockout.js,django-views,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_
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:
如果有人能帮我解决问题,我将不胜感激。
提前感谢。使用ko.mapping它是一个您可以下载的插件,它只更新在两个状态之间发生变化的观察值,因此只有发生变化的成员才会在视图中重新呈现。我下载了knockout.mappings latest.js(版本2.0)。然后将其应用到我的代码中。但我面临着与之前相同的问题,即我能够在post上获取数据,但无法在表中重新加载该数据。在使用ko.mappings之后,我已经更新了上面的代码…请帮助我找出哪里出了问题…如果可能的话,如果有人能更正我的代码,我将非常高兴…提前谢谢。。
<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 );
});
</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>
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))