javascriptを使用してNaticScriptリストビューを返す検索関数を作成する

Question

こんにちは、私はNativeScriptを使っていましたが、.xmlを.jsコードビハインドページに接続することはできません。

最終的な目標は、検索可能なリストページを作成し、一致するデータを持つ項目のみを返します。それは簡単に聞こえる、私は一連の空想的なコードビットを試してみたが、私はループ= Sのために基本的にダウンです。

何か助けていただければ幸いです。私が残した髪の毛を残しておきたいと思います。

NativeScript検索バーの属性はここにある：https://docs.nativescript.org/api-reference/classes/_ui_search_bar_.searchbar.html

彼らはまた、私はtypescriptですであると信じて、このコードは、提供：ここ https://docs.nativescript.org/cookbook/ui/search-bar

は

var searchBarModule = require("ui/search-bar"); 
var dialogsModule = require("ui/dialogs"); 
var observableModule = require("data/observable") 
var ObservableArray = require("data/observable-array").ObservableArray; 
var page; 

var pageData = new observableModule.fromObject({ 
    list: new ObservableArray([ 
     { name: "one" }, 
     { name: "two" }, 
     { name: "three" }, 
     { name: "one one" } 
    ]), 
    searchtxt:"Search items" 
}); 

exports.loaded = function(args) { 
    page = args.object; 
    page.bindingContext = pageData; 
}; 

exports.searched = function() { 
    var searchtxt = pageData.searchtxt; 
    var list = pageData.list; 

    for(i = 0; i < 3; i++){ 
    if(list[i].indexOf(searchtxt)!=-1){ 
     var newlist.push(searchtxt); 
     console.log(newlist); 
    } 
    } 
}; 

の背後にある私のNativeScriptの.jsコードで、私のXML正面ページ

<Page loaded="loaded"> 
    <StackLayout orientation="vertical"> 
    <Image src="res://logo" stretch="none" horizontalAlignment="center" /> 
     <SearchBar id="searchBar" hint="Search" text="{{ searchtxt }}" clear="onClear" submit="searched" /> 

     <GridLayout> 
     <ListView items="{{ list }}"> 
      <ListView.itemTemplate> 
       <Label text="{{ name }}" horizontalAlignment="left" verticalAlignment="center"/> 
      </ListView.itemTemplate> 
     </ListView> 
    </GridLayout> 

    </StackLayout> 
</Page> 

ありがとう

Answer 1

リストが表示されている場合は、XMLが正しく読み込んでいることを意味します。問題は、検索した関数内にあるはずです。 searchedtxtsearchedtxtに、searchedtxtのpageDataのセッターがないので、正しいかどうか試しましたか？

しかし、searchedのパラメータとしてargsを渡して、正確にテキストを取得するようにしてください（args.objectはこの場合は検索バーです）。

さらに検索したテキストに基づいて、要件に一致するアイテムを含む新しいリストを作成しますが、そのリストをpageData（ページのbindingContext）に設定しないでください。つまり、新しいリストを作成しましたが、そのリストをデータとして受け取るようページに指示しません。ここにあなたの質問に対する私の提案があり、それが動作願っています：

.jsファイルで：

// Separate to the originalList so that you can set it to pageData again when user clear the search 
var originalList = new ObservableArray([ 
     { name: "one" }, 
     { name: "two" }, 
     { name: "three" }, 
     { name: "one one" } 
    ]); 

var pageData = new observableModule.fromObject({ 
    list: originalList, 
    searchtxt:"Search items" 
}); 

exports.searched = function(args) { 
    var searchtxt = args.object.text; 
    pageData.list = new ObservableArray(); 

    for(var i = 0; i < originalList.length; i++){ 
    if(originalList[i].name.indexOf(searchtxt) !== -1){ 
     pageData.list.push(pageData.list[i]); 
     console.log(pageData.list); 
    } 
    } 
}; 

Answer 2

は、私が実際にNativeScriptからとPhoneGapのに離れて移動。実装する方がはるかに簡単で、コードは期待通りに動作します。

検索機能のための私の基本的なJavaScriptのソリューションコードはここPlunkerで見ることができ

： https://plnkr.co/edit/RnLYElvk2LaOY0KnePlN?p=info

これは私の一般的な検索機能ソリューションです：

function searchFor() { 
    searchedItems = []; 
    searchTerm = document.getElementById('searchBox').value; 
    for (i = 0; i < data.length; i++) { 

    if (data[i].ID.includes(searchTerm) || data[i].DATA.includes(searchTerm)) { 

     listToShow.push({ 
     "ID": data[i].ID, 
     "LINK": data[i].LINK 
     }); 
     listLinks.push(data[i].LINK); 
     searchedItems.push('<p><a href="#" onclick="loadPage(' + data[i].LINK + ');">' + data[i].ID + '</a></p>'); 

    } 
    } 
    document.getElementById('text').innerHTML = searchedItems; 
}