Knockout/breeze/select strange binding (loads the query into the
observable, but the select isn't updated)
So I've been at this back and forth for quite a long time now, so I'll
just get to the point.
I am creating an application based on the HotTowel template, so I'm using
knockout, breeze, Q etc. I'm using a breeze query to get some data from
the server, and then I load that data into the first select (as options).
This changes the selectedModel observable and the subscription triggers (
the subscription is the current "solution", I have used data-bind etc with
the same results). The subscription then takes the new selectedModel value
and uses it to get data for the second observable. This query also passes
and the results are stored in the modelProperties observable array, yet
the UI does NOT update the second select (it's empty). The strange thing
is, pressing ctrl + F5 (i tried about 50 times in a row) always populates
it correctly, but NEVER on the first load.
TLDR; 2 selects, selected option of the first one defines the query for
the options of the second one. Queries work, observables get populated,
first select is always populated, second never on first boot but always on
the following ctrl+F5.
Here are some snippets regarding this piece of the application: The
viewmodel for this page (simplified for this particular problem, I am
positive the rest is not important for this):
define(['services/logger', 'services/datacontext'], function (logger,
datacontext) {
var models = ko.observableArray();
var modelProperties = ko.observableArray();
var selectedModel = ko.observable();
var init = true;
function activate() {
logger.log('Search View Activated', null, 'search', true);
return datacontext.getModels(models);
}
var sub = selectedModel.subscribe(function (newValue) {
return datacontext.getModelProperties(modelProperties, newValue);
});
var vm = {
activate: activate,
models: models,
selectedModel: selectedModel,
modelProperties: modelProperties,
title: 'Search View'
};
return vm;
The view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body id="one">
<select id="entitySelect" class ="entitySelect" name="first"
data-bind="options: models, value: selectedModel">
</select>
<select id="propertySelect" class ="propertySelect" data-bind=
'options:modelProperties'></select>
</body>
</html>
And the regarded methods in the datacontext:
var getModels = function (modelsObservable) {
var query = EntityQuery.from('Models');
return manager.executeQuery(query)
.then(querySucceeded)
.fail(queryFailed);
function querySucceeded(data) {
logger.log("Query succeeded", true);
logger.log(data);
if (modelsObservable) {
modelsObservable(data.results);
}
logger.log('Retrieved [Models] from remote data source',
data, true);
}
function queryFailed(data) {
logger.log(data.toString(), data, true);
}
};
var getModelProperties = function (propertiesObservable,modelName) {
var query = EntityQuery.from('ModelProperties').withParameters({
name: modelName });
return manager.executeQuery(query)
.then(querySucceeded)
.fail(queryFailed);
function querySucceeded(data) {
logger.log("Query succeeded", null, true);
logger.log(data);
if (propertiesObservable) {
propertiesObservable(data.results);
}
logger.log('Retrieved [Properties] from remote data source',
data, true);
}
function queryFailed(data) {
logger.log(data.toString(), data, true);
}
};
Once again I'd like to point out that all the queries do pass, and the
observableArrays do get populated with the results (checked with .peek()
).
Here are some screenshots to clarify the problem: On first boot from VS :
http://i.imgur.com/9OsnLyo.png
Then, ctrl+F5 http://i.imgur.com/TvzFjbS.png
I have tried pretty much everything I can think of, and googled everything
that came to mind, but to no avail. Any help would be greatly appreciated!
Also, this is my first post here so I apologize for any mistakes!
No comments:
Post a Comment