なにかと使ってみたいFilter機能。
githubにいくつかexamplesがあがっていて、そのソース等を元に自分なりにもう少しわかりやすくしてみました。これが正しい実装なのかはちょっとあれですが。他にわかりやすい書き方があるといいな。
https://github.com/riot/examples
簡単な説明
- まずテキストをまとめた配列 filterList を用意。
- 初回起動時に呼ばれる mount の処理で、 originArr に格納。
- filterList にある title を表示する。（この時点ではすべて表示）
- テキストボックスに入力すると filter() 関数が呼ばれ、入力された値が originArr の中に含まれているかを判定し、その結果を updateArr に格納。
- 文字入力のイベントで、update が動くのでそのタイミングで filterList の値を updateArr に替える。
- filterで絞り込みした結果が表示される。
↑日本語があやしいかもなので、下記ソースを参照。
サンプルソース
コピペでどうぞ。
filter.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<app></app>
<script type="riot/tag">
<app>
<h3>Filter Demo</h3>
<input type="text" name="searchFilter" onkeyup={ this.filter } placeholder="ここに入力してね..."/>
<ul>
<li each={ target , i in filterList }>
<a href="{ target.url }">{ target.title }</a>
</li>
</ul>
var originArr = [] //リスト全てを格納
var updateArr = [] //filterした結果を格納
//onkeyup時に呼ぶ関数
filter() {
var keyword = this.searchFilter.value
if (updateArr != undefined){
updateArr = Array.prototype.filter.call(originArr, function(e){
if (e.title.indexOf(keyword) > -1) {
return true
} else {
return false
}
return true
})
}
}
//mount時にすべての配列を originArr にセット
this.on('mount', function(){
originArr = this.filterList
})
//関数で処理した結果を filterList に反映させる。
this.on('update', function(){
if (originArr!=""){
this.filterList = updateArr
}
})
//検索対象のリスト
this.filterList = [
{url:'/link1/', title:'あか'},
{url:'/link2/', title:'あお'},
{url:'/link3/', title:'きいろ'},
{url:'/link4/', title:'しろ'},
{url:'/link5/', title:'くろ'},
]
</app>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.0/riot+compiler.min.js"></script>
<script>riot.mount('*')</script>
</body>
</html>