Nativescript 使用动态参数调用全局转换器

Question

我正在使用全局转换器在结果记录中突出显示搜索到的文本。当常量值被传递时，它被正确地发送到转换器但是当来自搜索框的值被传递时，搜索到的文本或名称被传递给全局转换器，这很奇怪。我不确定我错过了什么。以下是相关代码。

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;
}

主页.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>

如果您想在手机上试用，我还在下面创建了一个游乐场示例https://play.nativescript.org/?template=play-tsc&id=FaTrgV&v=12。

Answer 1

itemTemplate 内的绑定上下文将仅限于当前数据项，您必须访问父级的绑定上下文才能从itemTemplate 访问searchPhrase。

<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>