在对文档进行了更多研究之后,看起来自定义小部件是尝试实现我所需要的最佳方式:一个自动完成下拉菜单,在用户类型时按标题加载文章/博客文章(我选择了 npm jquery-autocomplete,https://www.npmjs.com/package/jquery-autocomplete,因为我认为这个功能很容易实现,但也许 pos 本身有更简单的方法)。
我按照关于小部件的教程http://apostrophecms.org/docs/tutorials/getting-started/custom-widgets.html中的说明进行操作,并认为我几乎已经将其连接起来,但我没有看到搜索小部件(视图)呈现,而不是 dom 显示一个空元素 div class="apos-area" data-apos-area="" 元素,这表明在将所有部分链接在一起之间缺少一块,但我不能根据文档示例代码识别缺失的部分。
这是问题 #1,下面的代码中缺少什么来阻止 search.html 视图加载?
应用程序.js
modules: {
'search-widget': {}
}
lib\modules\search-widget\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\modules\search-widget\views\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\撇号-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 是,在 search-widget\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>