javascript - Durandal observable array not updating -
i copied pagination example durandal samples code , have noticed function gets called once. changing values on observable not have effect on items observable array , not make fresh call simplegrid . doing wrong ?
my gridviewmodel not called data in first time , not called again.
thanks lot.
start.html
<html snipped> <div data-bind='compose: gridviewmodel'></div> start.js
define(['durandal/system', 'plugins/http', 'durandal/app', './simplegrid', 'knockout', 'moment'], function (system, http, app, simplegrid, ko, moment) { //note: module exports object. //that means every module "requires" same object instance. //if wish able create multiple instances, instead export function. //see "welcome" module example of function export. var self = this; self.start_date = ko.observable(""); self.end_date = ko.observable(""); self.records_per_page = ko.observable(""); self.records = ko.observablearray([]); self.pages = ko.observablearray([]); var initialdata = []; self.getshippersdata = function () { var = this; var obj = { start_date: this.start_date(), end_date: this.end_date(), search_for: this.search_for(), records_per_page: this.records_per_page() }; http.get('shippers.php/records', obj).then(function (response) { that.records(response.dbrecs); that.initialdata = response.pages; that.pages(response.pages); console.log("updating pages"); }, function (error) { console.log("error state : call shippers.php failed"); }); }; self.search_for = ko.observable("").extend({ ratelimit: { timeout: 500, method: "notifywhenchangesstop" } }); search_for.subscribe(function (searchterm) { //make use of searchterm i.e. search_for variable make ajax call. //whenever change value of search_for, method invoke //console.log("this proxy ajax call"); self.getshippersdata(); }); console.log("this after shipper call"); console.log(initialdata); self.items = ko.observablearray(initialdata); self.gridviewmodel = new simplegrid({ data: self.pages, pagesize: self.records_per_page }); return { items: items, start_date: start_date, end_date: end_date, records_per_page: records_per_page, search_for: search_for, records: records, pages: pages, getshippersdata: getshippersdata, gridviewmodel: gridviewmodel, simplegrid: simplegrid, activate: function () { //the router's activator calls function , waits complete before proceeding var begin = moment().startof('day').format('dd/mm/yyyy hh:mm:ss'); var end = moment().endof('day').format('dd/mm/yyyy hh:mm:ss'); begin = "15/05/2014 00:00:00"; end = "18/05/2014 00:00:00"; this.start_date(begin); this.end_date(end); this.getshippersdata(); }, select: function (item) { //the app model allows easy display of modal dialogs passing view model //views located convention, specify viewurl }, /* candeactivate: function () { //the router's activator calls function see if can leave screen //return app.showmessage('are sure want leave page?', 'navigate', ['yes', 'no']); } */ }; }); simplegrid.js
define(['knockout'], function (ko) { var simplegrid = function (configuration) { console.log("i in simplegrid"); console.log(configuration); this.data = configuration.data; this.currentpageindex = ko.observable(0); this.pagesize = configuration.pagesize || 5; this.itemsoncurrentpage = ko.computed(function () { var startindex = this.pagesize * this.currentpageindex(); return this.data.slice(startindex, startindex + this.pagesize); }, this); this.maxpageindex = ko.computed(function () { return math.ceil(ko.utils.unwrapobservable(this.data).length / this.pagesize) - 1; }, this); }; return simplegrid; }); simplegrid.html
<div> <ul class="pagination"> <!-- ko foreach: ko.utils.range(0, maxpageindex) --> <li> <a href="#" data-bind="text: $data + 1, click: function () { $root.currentpageindex($data); }"></a> </li> <!-- /ko --> </ul> </div>
i think need prefix functions in object return self.. this:
return { items: self.items, start_date: self.start_date, end_date: self.end_date, records_per_page: self.records_per_page, search_for: self.search_for, records: self.records, pages: self.pages, getshippersdata: self.getshippersdata, gridviewmodel: self.gridviewmodel and in activate function, call self.functionname instead of this.. i've had similar problems when doing , calling this. in object wich i'm returning.
Comments
Post a Comment