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

6 posts, 0 answers
  1. Marc
    Marc avatar
    84 posts
    Member since:
    Oct 2013

    Posted 19 Jun Link to this post

    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

  2. Marc
    Marc avatar
    84 posts
    Member since:
    Oct 2013

    Posted 20 Jun in reply to Marc Link to this post

    Any hints on this?

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

  3. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 22 Jun Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  4. Marc
    Marc avatar
    84 posts
    Member since:
    Oct 2013

    Posted 22 Jun in reply to Nikolay Iliev Link to this post

    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

  5. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 22 Jun Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  6. Marc
    Marc avatar
    84 posts
    Member since:
    Oct 2013

    Posted 22 Jun in reply to Nikolay Iliev Link to this post

    Hello Nikolay,

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

    Best regards,

    Marc

Back to Top