v1.2がリリースされたようです。
あまり記事がなかったので備忘代わりにまとめておきます。
公式サイト
どういうライブラリ？
ulで作ったリストを、jsで手軽にliを追加したり、条件指定して削除したり、
絞り込みしたりソートしたりする機能を提供します。
jsのみでcssは一切ないので、UIは好きにできます。
インストール
上記に書いてある通り。
npmでもbowerでもCDNでもzipで落として解凍しても大丈夫です。
使い方サンプル
ざっくりhtmlファイルとjsファイルを作るとこんな感じになります。
ディレクトリ構成
/ ---- index.html
|
|-- index.js
|
|-- bower_components/ ---- list.js/ ---- dist/ ---- list.min.js
index.html
<html>
<head>
</head>
<body>
<!-- ここのリストが動的に変わる -->
<div id="shop-list">
<ul class="list">
</ul>
</div>
<!-- 追加用 -->
<input type="text" id="input-text" placeholder="name" />
<button type="button" name="add">add</button>
<!-- 削除ボタン -->
<button type="button" name="delete">delete</button>
<!-- ソートボタン -->
<button type="button" class="sort" data-sort="name">sort</button>
<!-- 検索用 -->
<input type="text" class="search" placeholder="search" />
<button type="button" id="search">search</button>
<script src="./bower_components/list.js/dist/list.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
index.js
'use strict';
var options = {
// リストカラム名
valueNames: ['name', 'id'],
// アイテムが追加されるときのタグ
item: '<li><h3 class="name"></h3><p class="shop"></p></li>'
};
// リストを生成
this.shopList = new List('shop-list', options);
// 一旦グローバルにidを置いておいてprimary keyにしとく
this.id = 0;
// 追加ボタンイベント登録
document.querySelector('[name=add]').addEventListener('click', () => {
this.shopList.add({
name: document.getElementById('input-text').value,
id: this.id++,
});
});
// 削除ボタンイベント登録
document.querySelector('[name=delete]').addEventListener('click', () => {
this.shopList.remove("id", --this.id);
});
// ソートボタンイベント登録
document.querySelector('.sort').addEventListener('click', () => {
this.shopList.sort('id', {order: "desc"});
});
// 検索ボタンイベント登録
document.getElementById('search').addEventListener('click', () => {
this.shopList.search(document.querySelector('.search').value, ['name']);
});