Hi guys,
First of all: I am enjoying using Nativescript, but as a newby I also have some problems that take a lot of time to overcome. Please have a look at the two examples below, run them and see the difference. Is this a bug or by design?
It seems the UI isn't updated with the changed property of an Observable when a propertyName is repeated in the object tree:
Version 1 works as intended, both fields are updated with the new value on each button click. Version 2 only updates the field 'item.secondsobject.secondsobject' on the first click and ignores the updated value on consecutive clicks. To be sure, I also added an extra eventListener for the propertyChange event, the propertyChangeEvent is raised. So apparently, Nativescript's databinding doesn't properly handle objects that have properties which in turn also have a property with the same name.
I'm running this example on Genymotion Android version 4.4.4 and 6.0.0 on Windows 8.1
package.json:
{
"nativescript": {
"id": "org.nativescript.holsaapp",
"tns-android": {
"version": "1.7.1"
}
},
"dependencies": {
"tns-core-modules": "1.7.1"
}
}
Oh, and, I don't think it's really relevant , but to be on the safe side: when I run tns I see:
'Support for node.js 4.1.1 is not verified. This CLI might not install or run properly.'
obs.xml version 1:
<Page loaded="loaded">
<StackLayout>
<TextField text="{{ item.seconds }}"/>
<TextField text="{{ item.secondsobject.seconds}}"/>
<Button text="Increase" tap="increaseSeconds"/>
</StackLayout>
</Page>
obs.js version 1:
var Observable = require("data/observable").Observable;
var pageData = new Observable({
item: new Observable({seconds: 1, secondsobject: {seconds: 1}})
});
var page;
exports.loaded = function(args) {
page = args.object;
page.bindingContext = pageData;
};
exports.increaseSeconds = function() {
pageData.item.set("seconds", pageData.item.seconds + 1);
var newValue = pageData.item.secondsobject.seconds + 1;
pageData.item.set("secondsobject",{seconds: newValue});
};
obs.xml version 2:
<Page loaded="loaded">
<StackLayout>
<TextField text="{{ item.seconds }}"/>
<TextField text="{{ item.secondsobject.secondsobject}}"/>
<Button text="Increase" tap="increaseSeconds"/>
</StackLayout>
</Page>
obs.js version 2:
var Observable = require("data/observable").Observable;
var pageData = new Observable({
item: new Observable({seconds: 1, secondsobject: {secondsobject: 1}})
});
var page;
exports.loaded = function(args) {
page = args.object;
page.bindingContext = pageData;
};
exports.increaseSeconds = function() {
pageData.item.set("seconds", pageData.item.seconds + 1);
var newValue = pageData.item.secondsobject.secondsobject + 1;
pageData.item.set("secondsobject",{secondsobject: newValue});
};
Hi guys,
First of all: I am enjoying using Nativescript, but as a newby I also have some problems that take a lot of time to overcome. Please have a look at the two examples below, run them and see the difference. Is this a bug or by design?
It seems the UI isn't updated with the changed property of an Observable when a propertyName is repeated in the object tree:
Version 1 works as intended, both fields are updated with the new value on each button click. Version 2 only updates the field 'item.secondsobject.secondsobject' on the first click and ignores the updated value on consecutive clicks. To be sure, I also added an extra eventListener for the propertyChange event, the propertyChangeEvent is raised. So apparently, Nativescript's databinding doesn't properly handle objects that have properties which in turn also have a property with the same name.
I'm running this example on Genymotion Android version 4.4.4 and 6.0.0 on Windows 8.1
package.json:
{ "nativescript": { "id": "org.nativescript.holsaapp", "tns-android": { "version": "1.7.1" } }, "dependencies": { "tns-core-modules": "1.7.1" } }Oh, and, I don't think it's really relevant , but to be on the safe side: when I run tns I see:
'Support for node.js 4.1.1 is not verified. This CLI might not install or run properly.'
obs.xml version 1:
<Page loaded="loaded"> <StackLayout> <TextField text="{{ item.seconds }}"/> <TextField text="{{ item.secondsobject.seconds}}"/> <Button text="Increase" tap="increaseSeconds"/> </StackLayout> </Page>obs.js version 1:
var Observable = require("data/observable").Observable; var pageData = new Observable({ item: new Observable({seconds: 1, secondsobject: {seconds: 1}}) }); var page; exports.loaded = function(args) { page = args.object; page.bindingContext = pageData; }; exports.increaseSeconds = function() { pageData.item.set("seconds", pageData.item.seconds + 1); var newValue = pageData.item.secondsobject.seconds + 1; pageData.item.set("secondsobject",{seconds: newValue}); };obs.xml version 2:
<Page loaded="loaded"> <StackLayout> <TextField text="{{ item.seconds }}"/> <TextField text="{{ item.secondsobject.secondsobject}}"/> <Button text="Increase" tap="increaseSeconds"/> </StackLayout> </Page>obs.js version 2:
var Observable = require("data/observable").Observable; var pageData = new Observable({ item: new Observable({seconds: 1, secondsobject: {secondsobject: 1}}) }); var page; exports.loaded = function(args) { page = args.object; page.bindingContext = pageData; }; exports.increaseSeconds = function() { pageData.item.set("seconds", pageData.item.seconds + 1); var newValue = pageData.item.secondsobject.secondsobject + 1; pageData.item.set("secondsobject",{secondsobject: newValue}); };