【onsenui】ons-lazy-repeatでセルの高さを自動調整！！

はじめに

Onsen UIをいじってみて、無限スクロールのやり方を調べていた。
ドキュメント見ると行の高さを数値で返すという仕様なのだが他にやり方がないかteratailで質問したら最新版だと自動調整してくれるとの回答が来た。
まだ未リリースのため動作保証はないとのことだが、最新版を落としてビルドすれば試せるらしいので試してみた。2.2の正式リリースで採用されるらしい。

試した環境はangular1.6

onsenui@2.2のビルド

$ git clone -b master https://github.com/OnsenUI/OnsenUI.git
$ yarn install
$ npm install eco ancss gulp-less # 自分の環境では必要だった
$ gulp dist

自分の環境で出たエラー

Error: Cannot find module 'eco'
・・・
Error: Cannot find module 'ancss'
・・・
Error: Cannot find module 'gulp-less'
・・・

> ビルドされたファイルを使う
build/js/onsenui.min.js
build/js/angular-onsenui.min.js
build/css/onsenui.css
build/css/onsen-css-components.css

実際に使ってみる

<link rel="stylesheet" href="path/to/css/onsenui.css" />
<link rel="stylesheet" href="path/to/css/onsen-css-components.css" />
・・・
<script src="path/to/js/onsenui.min.js"></script>
<script src="path/to/js/angular-onsenui.min.js"></script>

<ons-page ng-controller="ListCtrl">
  <ons-toolbar>
    <div class="center">リスト</div>
  </ons-toolbar>
  <ons-list>
    <ons-list-item ons-lazy-repeat="delegate">
      {{ item.name }}
    </ons-list-item>
  </ons-list>
</ons-page>

<script>
    angular.module('MyApp', ['onsen'])
    .controller('ListCtrl', function($scope) {

        // 長さの異なる適当なデータを準備
        $scope.items = [];
        for (var i = 1; i <= 30; i++) {

            var name = "";
            for (var j = 0; j < i; j++)
                name += "アイテム";

            $scope.items.push({
                id: i,
                name: name + i
            });
        };

        // ons-lazy-repeatのdelegate
        $scope.delegate = {
            configureItemScope: function(index, itemScope) {
                itemScope.item = $scope.items[index];
            },
            countItems: function() {
                return $scope.items.length;
            }
        };
});
</script>

おわりに

率直にすごいと思いました。
Onsen UIとかまだちょっといじり始めた程度だけどハイブリッドいいかも。以上です