knockout.js - Durandal widget timing issue -
i have, supposedly, timing-problem durandal (v1.2) widget.
the widget used on multiple views , works perfect first view only.
all other views stay disabled , company().length remains 0. code executed on every view, ajax calls finished successfully, datacontext hits querysucceeded method , fills passed observablearray.
embedding widget:
<div data-bind="widget: { kind: 'companypicker', companyid: selectedcompanyid }"></div>
the widget markup :
<select data-bind="options: companies, optionstext: 'displayname', optionsvalue: 'id', optionscaption: 'choose...', value: selectedcompany, enable: companies().length > 0"></select> <span class="loader" data-bind="css: { active: companies().length == 0 }"> <i class="icon-spinner icon-2x icon-spin"></i> </span>
the widget code:
define(function (require) { var ctor = function (element, settings) { var self = this; self.datacontext = require('services/datacontext'); self.settings = settings; self.selectedcompany = ko.observable(); self.companies = ko.observablearray(); self.returningcompanyid = ko.observable(settings.companyid); settings.companyid.subscribe(function (newvalue) { if (!newvalue) { self.selectedcompany(null); } }); self.selectedcompany.subscribe(function (newvalue) { self.returningcompanyid()(newvalue); }); self.datacontext.getcompanies(self.companies); }; return ctor; });
this has weird looking code i'm not happy (returning, wrapping settings in observable, etc.) enabled me pass in observable (i.e. 'selectedcompanyid'), assign value , notified in viewmodel of current view without using pub/sub.
datacontext call:
//datacontext construct inspired jpapa :) var getcompanies = function (companies) { var query = entityquery.from('companyoverview'); return manager.executequery(query) .then(querysucceeded) .fail(queryfailed); function querysucceeded(data) { if (companies) { companies(data.results); } log('successfully retrieved companies', data, true); } };
but:
if wrap line
self.datacontext.getcompanies(self.companies);
into
settimeout(function() { self.datacontext.getcompanies(self.companies); }, 5000);
it works on every page. problem now, can't understand timing problem coming from.
data loading calls best placed activate
. if it's async call
in durandal 1.2 have return promise in durandal 2.0 optionally return promise in order durandal being able proceed correctly composition.
so assuming self.datacontext.getcompanies
returning promise following should sufficient.
ctor.prototype.activate = function(){ return self.datacontext.getcompanies(self.companies); }
edit pointed out in comment above won't work widgets in durandal 1.2. normal views in 1.2 still have follow pattern.
Comments
Post a Comment