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

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>

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

Answer 1

itemTemplate中的绑定上下文将仅限于当前数据项，您必须访问父级的绑定上下文才能从searchPhrase访问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>

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

1 个答案: