ドキュメントから詳細な調査を行った後、カスタムウィジェットが必要なものを達成するための最良の方法です：タイトルで記事/ブログ投稿をロードするオートコンプリートドロップダウンユーザータイプ（npm jquery-autocomplete、https://www.npmjs.com/package/jquery-autocompleteを選択しましたが、この機能を実装するのは簡単だと思っていましたが、おそらくapos自体の中には簡単な方法があります）。サードパーティのnpm jqueryモジュールを使用したカスタムウィジェット
私はウィジェットのチュートリアルの指示に従いましたが、これはほとんど私がこのフックアップしていると思うが、検索ウィジェット（ビュー）がレンダリングされず、代わりに空の要素divクラス= "apos-area" data-apos-area = ""要素。これは、すべての部分をリンクする間に欠けている部分があることを示しますが、ドキュメントのサンプルコードに基づいて欠けている部分を特定することはできません。
質問1：search.htmlビューの読み込みを維持するために、以下のコードには何が欠けていますか？
modules: {
'search-widget': {}
}
のlib \モジュール\検索ウィジェット\ index.js
module.exports = {
extend: 'apostrophe-widgets',
label: 'SiteSearch',
addFields: [{
type: 'string',
name: 'title',
label: 'Title'
},
{
type: 'string',
name: 'url',
label: 'Url'
}
],
construct: function(self, options) {
//load third party styles and scripts?
var superPushAssets = self.pushAssets;
self.pushAssets = function() {
superPushAssets();
self.pushAsset('stylesheet', 'autocomplete', { when: 'always' });
self.pushAsset('script', 'autocomplete', { when: 'always' })
};
//get the data
self.pageBeforeSend = function(req, callback) {
var criteria = [
{ "type": "apostrophe-blog" },
{ "published": true }
];
criteria = { $and: criteria };
self.apos.docs.find(req, criteria).sort({ title: 1 }).toArray(function(err, autocomplete) {
if (err) {
return callback(err);
}
//Can I do something like this to load the widget data?
req.data.autocomplete = autocomplete;
return callback(null);
});
}
}
};
のlib \モジュール\検索ウィジェット\ビュー
app.js \ search.htmlの
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" id="site-search" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
lib \ modules \ apostrophe-pages \ views \ pages \ home.html
{% extends 'apostrophe-templates:layout.html' %} {% block bodyClass %}{{ super() }} home-page{% endblock %} {% block title %}Help Site: {{ data.page.title | e }}{% endblock %} {% block main %}
<section id="promo" class="promo section offset-header">
<div class="container text-center">
<div class="row">
<div class="col-md-offset-2 col-md-8 col-sm-6 col-xs-12">
<!--search widget-->
{{ apos.singleton(data.page, 'search', 'search-widget') }}
</div>
</div>
</div>
</section>
質問＃2は、検索ウィジェットの\ index.jsに機能を構築、であるこれは、DOMにそれをレンダリングし、それを使用するために必要となるサードパーティの資産をロードするための正しい方法であります？
質問＃3は、search.htmlでdata.pageを使用してjquery-autocompleteオブジェクトにデータを送信するだけですか？
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" id="site-search" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<script>
$(function() {
$("#site-search").autocomplete({
source: {{ data.autocomplete | json }}
});
});
</script>