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

[Marc]

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

[Marc]

Any hints on that?

[Nick Iliev]

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