CODEWITHSUNDEEP
javascriptandroidnativescript
shashanka n
shashanka n

Reputation: 2598

Using nativescript converters

Im just now trying to get my hooks into nativescript with javascript and have a very basic question:

    let costFormatter= {
        toView(value){
            console.log('Got:' + value);
            return '$' + value;
        },
        toModel(value){
            console.log('Got:' + value);
            return '$' + value;
        }
    };
    http.getJSON("<My API Call>").then(function (r){
        page.bindingContext = {
            deals: r,
            costFormatter:costFormatter
        };
    }, function (e){
        //// Argument (e) is Error!
        //console.log(e);
    });

In the above code, I define the cost formatter I just want a $ to be added beside the price on every sale price on my listview labels. To render the list view Im using:

<ListView id="SteamItems" items="{{ deals }}">
                        <ListView.itemTemplate>
                            <GridLayout columns="*, *, 50, 50" rows="50, 50, auto, *">
                                <Image src="{{ thumb }}" row="0" col="0" cssClass="thumb"/>
                                <Label text="{{ title }}" key="1" row="0" col="1" cssClass="title"/>
                                <Label text="{{ normalPrice|costFormatter }}" key="2" row="0" col="2" cssClass="normal-price"/>
                                <Label text="{{ salePrice|costFormatter }}" key="3" row="0" col="3" cssClass="sale-price"/>

                            </GridLayout>

                        </ListView.itemTemplate>
                    </ListView>

I do not understand why I get 

JS: Cannot find function or filter: costFormatter

for each row in my listview in my nativescript terminal. What am I doing wrong?

Upvotes: 2

Views: 473

Answers (2)

RichL
RichL

Reputation: 1

Check the description at this docs page1. Special considerations for ListView items are described about 2/3 of the way down the page. Basically, register your converter function in the application resources. Hope that helps you. It did for me.

Upvotes: 0

Eddy Verbruggen
Eddy Verbruggen

Reputation: 3550

It seems you're trying to create a so-called 'pipe'.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'costFormatter',
  pure: true
})

export class CostFormatterPipe implements PipeTransform {
  transform(price: string): string {
    return "$ " + price;
  }
}

Then make sure you add CostFormatterPipe to the Declarations array of the module you want to use it in.

Upvotes: 2

Related Questions