Mustacheを使用して検索のHTMLの出力を改善する!

Published on 11 August 2015 in Hue 3.9 / Programming / Search / Tutorial - 2 minutes read - Last modified on 04 February 2020

HueのSearch(検索)アプリはどんどんよくなっています !Hueの次のリリース(または既にGithubのマスター にある)では、あなたは、HueのMustacheのバージョンに追加機能を加えることができるようになり、HTMLの表示で直接関数を呼び出すことができます。どのように使用するのかを見てみましょう!以下のように、この例ではHTMLの結果ウィジェットでYelpのデモデータを使用したダッシュボードを追加します

Screenshot 2015-07-27 15.29.47

私たちは見た目を良くするため、それぞれのレビューにグラフィカルな星の評価とレストランの静的なGoogle Mapを作りたいと思っています。CSS/JSタブで、私たちは新しいMustacheの機能である ‘hue_fn_renderStars’ と ‘hue_fn_renderMap’ を指定することができます’:

<script>
  viewModel.additionalMustache = function (item) {
    if (Mustache == "undefined") {
      return;
    }
 
    item.hue_fn_renderStars = function () {
      return function (val) {
        var stars = parseInt(Mustache.render(val, item));
        var html = '';
        for (var i=0;i<stars;i++){
          html += '<i class="fa fa-star"></i>';
        }
        return html; 
      }
    };
   
    item.hue_fn_renderMap = function () {
      return function (val) {
        var coords = Mustache.render(val, item);
        return '<img src="https://maps.googleapis.com/maps/api/staticmap?center=' + coords + '&zoom=14&size=300x300&markers=color:red%7C' + coords + '">';
      }
    };
  }
</script>

追加のMustache関数の名前に ‘fue_fn_’ をプレフィックスにすることが非常に重要で、これでHueがピックアップして処理できるようになります。HTMLタブではこのように記述します:

<div class="row-fluid">
        <div class="row-fluid">
         <div class="span10">
           <h4>{{name}} {{#renderStars}}{{stars}}{{/renderStars}}</h4>
           <span class="muted">{{text}}</span>
         </div>
        <div class="span2">{{#renderMap}}{{latitude}},{{longitude}}{{/renderMap}}<br/>{{full_address}}</div>
        </div>
        <br>
       </div>

ご覧いただいているように、新しく追加された機能は{{#renderStars}} {{/ renderStars}} と {{#renderMap}} {{/ renderMap}}を用いて呼び出すことができます。そしてたったこれらのコード数行で結果の表示ははるかに良くなりました!

Screenshot 2015-07-27 15.51.21

HTMLテンプレート内の関数宣言の間にある文字列にアクセスするには **Mustache.render(val, item)**を参照する必要があります。

例えば、’if’ のような条件関数を行ってその中で変数を評価したい場合、このようにすることができます

<script>
  viewModel.additionalMustache = function (item) {
    if (Mustache == "undefined") {
      return;
    }
 
    item.hue_fn_if = function () {
      return function (val) {
        var isTrue = $.trim(Mustache.render(val, item)) == 'true';
        return  isTrue ? "The condition is true!" : "No, it's false";
      }
    };
  }
</script>

そして、HTMLタブで使用します

{{#if}}{{field_to_test}}{{/if}}

HTMLの結果ウィジェットで可能性は無限大です!:)いつものように、コメントとフィードバックは hue-user メーリングリストや@gethueまでお気軽に!


comments powered by Disqus

More recent stories

10 June 2021
Hue4.10(新しいSQLエディタコンポーネント、REST API、小さなファイルのインポート、Slackアプリなど)がリリースされました!
Read More
29 May 2021
Sqlスクラッチパッドコンポーネントとパブリック REST API を使用して、5 分で独自の SQL エディター (BYOE) を構築する
Read More
26 May 2021
改善されたHueのImporter -- ファイルの選択、方言の選択、テーブルの作成
Read More