I have a grid and a select control on the page. Choosing any select value triggers grid update. That updating is done using computed. Can I manually trigger grid to update, say, in situation when a new value is added to a grid?
function vm(){
var self = this;
self.items = ko.observableArray([]);
self.chosen_category = ko.observable("");
self.pager = {
page_namber : ko.observable(1),
page_size : ko.observable(10)
};
self.sort = {
field : ko.observable('name'),
dist : ko.observable('asc')
};
// etc.
self.fetch = ko.computed(function(){
$.ajax({
url: '/api/items/',
type: 'GET',
data: ko.toJSON(self),
contentType: 'application/json',
success: self.items
});
}, self);
self.add_item = function() {
//here I want to update the grid
self.fetch(); // not work
};
}
Sure I can move it to a separate function but I am looking for a cleaner solution. Thanks!
working version :
function vm() {
var self = this;
self.items = ko.observableArray([]);
self.chosen_category = ko.observable("test");
self.pager = {
page: ko.observable(1),
size: ko.observable(10)
};
self.sort = {
field: ko.observable('name'),
dist: ko.observable('asc')
};
self.fetch = function () {
var data = {
category: self.chosen_category(),
pager: ko.toJS(self.pager),
sort: ko.toJS(self.sort)
};
$.ajax({
url: '/api/items/',
type: 'POST',
data: ko.toJSON(data),
contentType: 'application/json',
success: self.items
});
};
self._auto_update = ko.computed(self.fetch).extend({ throttle: 1 }); ;
self.add_item = function () {
self.fetch();
};
}
It is better to do this with subscription
instead of computed
. In that case you can define fetch function to use for both subscription and manual call:
function vm(){
var self = this;
self.items = ko.observableArray([]);
self.chosen_category = ko.observable("");
self.fetch = function(){
$.get('/api/items/' + self.chosen_category(), self.items);
};
self.chosen_category.subscribe(self.fetch);
self.add_item = function() {
//here I want to update the grid
self.fetch();
};
}
Also you can do the same with computed:
function vm(){
var self = this;
self.items = ko.observableArray([]);
self.chosen_category = ko.observable("");
self.fetch = function(){
$.get('/api/items/' + self.chosen_category(), self.items);
};
self.doStaff = ko.computed(self.fetch);
self.add_item = function() {
//here I want to update the grid
self.fetch();
};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With