NativeScript TextView binding: TypeError instance.set is not a function

Thread is closed for posting
3 posts, 0 answers
  1. Marc
    Marc avatar
    101 posts
    Member since:
    Oct 2013

    Posted 18 Nov 2016 Link to this post

    Hi,

    I have an Observable like this in our app:

    exports.vmMain = new observableModule.Observable({
        message: {
            id: 123456789,
            text: "My default text"
            //...
        },
        //other bundled objects...
    });

     

    and I bind the text property of the TextView to the text property of my message Object in the Observable, like this:

    <TextView text="{{ message.text }}" />

     

    When the page is loaded, the TextView contains the text "My default text", so the binding seems to work.

    Unfortunatley, when I type something in the TextView, there is an binding-error:

    Binding error while setting property text of [object object]: TypeError: instance.set is not a function

     

    We have many properties in this form, so I tried to structure them as Objects within the Observable, instead of managing many single components in the Observable.

     

    I work with the latest NativeScript version 2.4.0. The binding error occurs on Android and iOS.

    Is that something that can be fixed, so that this scenario would work in a future release?

     

    Best regards

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

    Posted 22 Nov 2016 in reply to Marc Link to this post

    Any hints on that?
  3. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 23 Nov 2016 Link to this post

    Hi Marc,

    Your case will work as expected if you need only one-way binding and you are not expecting to update back the value of your inner key.
    In order for your message.text or message.id to be also updated when the text-view value is changed you can do the following:

    exports.vmMain = new observable.Observable({
        message: new observable.Observable({
            id: 123456789,
            text: "My default text"
        }),
    });

    TO simplify the creation of multiple observable properties you can use MVVM pattern - it might seem overkill at first but once you are familiar with the principles it will ease the work with observables object a lot.
    A simple MVVM pattern is created with 
    // CLI command
    tns create myApp
     
    // or the following CLI command for TypeScript command
    tns create myApp --tsc

    These commands will create a base project with the file called main-view-model.js (or *.ts if using TypeScript) and in there you can see how MVVM pattern is structuring the whole view-model.


    Regards,
    Nikolay Iliev
    Telerik by Progress
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top