---
title: Mustacheを使用して検索のHTMLの出力を改善する!
author: Hue Team
type: post
date: 2015-08-11T02:33:56+00:00
url: /enhance-search-results-2/
sf_thumbnail_type:
- none
sf_thumbnail_link_type:
- link_to_post
sf_detail_type:
- none
sf_page_title:
- 1
sf_page_title_style:
- standard
sf_no_breadcrumbs:
- 1
sf_page_title_bg:
- none
sf_page_title_text_style:
- light
sf_background_image_size:
- cover
sf_custom_excerpt:
- HueのSearch(検索)アプリはどんどんよくなっています !Hueの次のリリース(または既にGithubのマスター にある)では、あなたは、HueのMustacheのバージョンに追加機能を加えることができるようになり、HTMLの表示で直接関数を呼び出すことができます。どのように使用するのかを見てみましょう!
sf_social_sharing:
- 1
sf_sidebar_config:
- left-sidebar
sf_left_sidebar:
- Sidebar-2
sf_right_sidebar:
- Sidebar-1
sf_caption_position:
- caption-right
sf_remove_promo_bar:
- 1
categories:
- Hue 3.9
- Programming
- Search
- Tutorial
---
HueのSearch(検索)アプリは[どんどんよくなっています][1] !Hueの次のリリース(または既に[Githubのマスター][2] にある)では、あなたは、Hueの[Mustache][3]のバージョンに追加機能を加えることができるようになり、HTMLの表示で直接関数を呼び出すことができます。どのように使用するのかを見てみましょう!以下のように、この例ではHTMLの結果ウィジェットでYelpのデモデータを使用したダッシュボードを追加します
[
][4]
私たちは見た目を良くするため、それぞれのレビューにグラフィカルな星の評価とレストランの[静的なGoogle Map][5]を作りたいと思っています。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}}を用いて呼び出すことができます。そしてたったこれらのコード数行で結果の表示ははるかに良くなりました!
[
][6]
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][7] メーリングリストや[@gethue][8]までお気軽に!
[1]: https://gethue.com/build-a-real-time-analytic-dashboard-with-solr-search-and-spark-streaming/
[2]: https://github.com/cloudera/hue
[3]: https://github.com/janl/mustache.js/
[4]: https://cdn.gethue.com/uploads/2015/07/Screenshot-2015-07-27-15.29.47.png
[5]: https://developers.google.com/maps/documentation/staticmaps/intro
[6]: https://cdn.gethue.com/uploads/2015/07/Screenshot-2015-07-27-15.51.21.png
[7]: http://groups.google.com/a/cloudera.org/group/hue-user
[8]: https://twitter.com/gethue