binding issue when dynamically adding properties to Observable (since NS 3)

[Marc]

Hello,

when I try to add a property to an Observable instance dynamically, the binding does not work correctly anymore since we migrated our app to NS 3.

For example: let's say I dynamically add an ActivityIndicator to my page like this

var activityIndicator = new activityIndicatorModule.ActivityIndicator();

//bind busy property
activityIndicator.bind({
    sourceProperty: "isLoading",
    targetProperty: "busy",
    twoWay: true
}, vmModule.vmMain);

//bind visibility
activityIndicator.bind({
    sourceProperty: "isLoading",
    targetProperty: "visibility",
    twoWay: true,
    expression: "isLoading ? 'visible' : 'collapse'"
}, vmModule.vmMain);

//set isLoading property in Observable instance for DataBinding
vmModule.vmMain.set("isLoading", false);

container.addChild(activityIndicator);

 

Now I would have to set the isLoading property in my Observable like this:

exports.vmMain = observableModule.fromObject({
    isLoading: false
});

 

Then the DataBinding would work correctly. The problem is, that in our use case we have a TabView with a variable count of tabs and each Tab should have an own ActivityIndicator and we have isLoading-properties depending on the TabView-index, so we have: isLoading0, isLoading 1, ... but I do not know how many there are, so that's why I try to set/init the property during the building of the TabView vmModule.vmMain.set("isLoading" + currentIndex, false);

This worked with tns-core-modules 2.5.2.

Is this just a bug or is the way I try to achieve this not supported anymore?

I added a sample project that can be found here

Note: for simplicity the sample contains only a simple page (without TabView), where one ActivityIndicator is dynamically added.

 

Best regards,

Marc

[Marc]

Any hints on this?

As this forum is about all Telerik products, I need to clarify, that this issue concerns NativeScript 3.0.3.

[Nick Iliev]

Hello Marc,

Although when using data binding with the ternary expression you can omit the sourceProperty this might led to some problems as noted here. So, to overcome this you can use the full syntax when setting the ternary expression (so it will include the sourceProperty).
e.g.

expression: "isLoading, isLoading ? 'visible' : 'collapse'"

Now the visibility will bind as expected as we have explicitly set the sourceProperty in the ternary expression.

Regards,
Nikolay Iliev
Progress Telerik

[Marc]

Hello Nikolay,

thanks for your reply.

I tested your suggestion for the ternary expression. Now I am able to see the ActivityIndicator, but it is still in the layout, even when its visible state is set to 'collapse'. So there is always a visible space. In addition, I get a binding-error message in the log:

JS: Binding: Run-time error occured in file: undefined at line: undefined and column: undefined

You can access an updated version of the sample project here

I hope you can figure out the cause of this binding issue.

 

Best regards,

Marc

[Nick Iliev]

Hi Marc,

Thank you for the sample projects - I was able to reproduce the problem at my side as well.
After some additional research, it appears that indeed the lack of initial value when creating your model is causing this behavior. I can confirm that this was unofficially supported in 2.5.2 (but not with previous versions of tns-core-modules) however there was some side effect when creating regular expressions without default values for their source properties which lead to this functionality no to be supported in NativeScript 3.x.x.

To overcome this you can directly use the busy property as your source. This way you will have a default value and in the same time, you can create your different ActivityIndicators each with its own unique boolean property.
e.g.

activityIndicator.bind({
    sourceProperty: "isLoading",
    targetProperty: "busy",
    twoWay: true
}, vmModule.vmMain);

//bind visibility
activityIndicator.bind({
    sourceProperty: "busy",
    targetProperty: "visibility",
    twoWay: false,
    expression: "busy ? 'visible' : 'collapse'"
}, activityIndicator);

(based on the test application from the last response)

Regards,
Nikolay Iliev
Progress Telerik

[Marc]

Hello Nikolay,

thanks for your help, now everything seems to work as expected.

Best regards,

Marc