CODEWITHSUNDEEP
convertersnativescript
pentool
pentool

Reputation: 563

How do I use a converter in NativeScript?

I'm trying to use a simple converter in {N}. I have read the docs at https://docs.nativescript.org/core-concepts/data-binding#using-converters-in-bindings about 14 times so far but I do not understand the concept because the documentation seem to be very vague. They use a half finished example of a dateConverter, and they do...

source.set("dateConverter", dateConverter);
source.set("testDate", new Date());
page.bindingContext = source;

...without explaining where is the "source" is coming from or how do they set it up? Also, I already have a page.bindingContext assigned so I don't know how do I relate that to the example provided in the docs.

This is my XML file:

<page navigatingTo="onNavigatingTo" backgroundColor="orange">
    <action-bar title="{{ name, name | uppercase }}" class="action-bar" />

    <stack-layout orientation="vertical" verticalAlignment="center">
        <label text="Welcome to Page-B" textAlignment="center" />
    </stack-layout>
</page>

I want the title of the actionBar to be uppercased, so I add an uppercase converter (or at least trying to). Here's the corresponding js file:

exports.onNavigatingTo = function(args) {
    var page = args.object;
    page.bindingContext = page.navigationContext;

    var uppercase = {
        toView: function(value) {
            console.log(`value: ${value}`);
            return value.toUpperCase();
        }
    }
}

I get the error: Cannot find function or filter: uppercase

I know I'm missing some sort of binding somewhere, to bind the converter to something else, but I have no idea how to do this. Anyone could provide a small example based on this?

I have seen this similar question Using nativescript converters but that is not helpful because I am also not using Angular (just plain NativeScript/JS) and that post doesn't have a meaningful, concluded answer either.

Upvotes: 0

Views: 442

Answers (2)

Nick Iliev
Nick Iliev

Reputation: 9670

The uppercase method should be part of your view-model as you are binding it in your XML. Detailed article section about converters in plain JS and/or TypeScript projects can be found here

e.g.

var uppercase = {
    toView: function(value) {
        console.log(`value: ${value}`);
        return value.toUpperCase();
    }
}


myViewModel.set("uppercase", uppercase); // e.g. myViewModel === new Observable();

page.bindingContext = myViewModel;

Upvotes: 2

pentool
pentool

Reputation: 563

Ok, I figured it out what was wrong with Nick's answer, and based on that, this code works:

exports.onNavigatingTo = function(args) {
    var page = args.object;

    var uppercase = {
        toView: function(value) {
            console.log(`value: ${value}`);
            return value.toUpperCase();
        }
    }

    var myViewModel = page.navigationContext;
    myViewModel.uppercase = uppercase;
    page.bindingContext = myViewModel;
}

Upvotes: 0

Related Questions