Nativescript calling global converter with dynamic parameters

Question

I am working on highlighting searched text in the resulted records for which I am using global converters. When the constant value is passed, it is sent correctly to converter but when value from search box is passed then either the searched text or name is passed to the global converter which is weird. I am not sure what I am missing. Following is relevant code.

converters.ts

getResources().highlightSearch = (sentence, searchText) => {
    console.log("Called highlightSearch......", sentence, searchText);
    const formattedString = new FormattedString();
    const span = new Span();
    if (!sentence) {
        sentence = '';
    }
    if (!searchText) {
        span.text = sentence;
        formattedString.spans.push(span);
    } else {
        let indexes: Array<number> = [];        
        if (searchText && sentence) {
            var pos: number = sentence.toLowerCase().indexOf(searchText.toLowerCase());            
            while (pos !== -1) {
                indexes.push(pos);
                pos = sentence.toLowerCase().indexOf(searchText.toLowerCase(), pos + searchText.length);
            }
        }        
        let tokens: Array<string> = [];
        if (indexes.length > 0) {            
            var start = 0;
            for (var i = 0; i < indexes.length; i++) {
                tokens.push(sentence.substring(start, indexes[i]));
                start = indexes[i];
                tokens.push(sentence.substring(start, start + searchText.length));
                start = start + searchText.length;
            }
            tokens.push(sentence.substring(start));            
        } else {
            sentence
            tokens.push(sentence);
        }
        tokens.forEach(str => {
            const span = new Span();
            span.text = str;
            span.className = "person-name";
            if (str.toLocaleLowerCase() === searchText.toLowerCase()) {
                span.className = span.className + " highlight";
            }
            formattedString.spans.push(span);
        });
    }
    return formattedString;
}

home-page.xml

<StackLayout>
    <SearchBar hint="Search People..." text="{{ searchPhrase }}" submit="{{ onSearchSubmit }}"
        clear="{{ clear }}" class="search-bar" />
    <lv:RadListView id="list-view" row="0" items="{{ people }}"
        marginRight="-2" height="100%">
        <lv:RadListView.itemTemplate>
            <StackLayout paddingTop="15" paddingBottom="15"
                        paddingLeft="15" paddingRight="15"
                        backgroundColor="White">
                <Label formattedText="{{ name | highlightSearch(searchPhrase) }}"
                    class="person-name" />                      
            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
</StackLayout>

I have also created a playground example below if you want to try it out on your mobile https://play.nativescript.org/?template=play-tsc&id=FaTrgV&v=12.

Answer 1

The binding context within itemTemplate will be limited to the current data item, you must access the parent's binding context for accessing searchPhrase from itemTemplate.

<StackLayout>
    <SearchBar hint="Search People..." text="{{ searchPhrase }}" submit="{{ onSearchSubmit }}"
        clear="{{ clear }}" class="search-bar" />
    <lv:RadListView id="list-view" row="0" items="{{ people }}"
        marginRight="-2" height="100%">
        <lv:RadListView.itemTemplate>
            <StackLayout paddingTop="15" paddingBottom="15"
                        paddingLeft="15" paddingRight="15"
                        backgroundColor="White">
                <Label formattedText="{{ name | highlightSearch($parents['RadListView'].searchPhrase) }}"
                    class="person-name" />                      
            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
</StackLayout>