Project에서 keystone.js로 작업하고 있습니다. 그리고 템플릿을 핸들 막대 (hbs)로하고 있습니다 할 일 : 인덱스 페이지에서 슬라이더를 표시하고 싶습니다 (슬라이더 모델의 이미지와 텍스트 만 표시 할 수 있도록 unslider.js로 해결했습니다.)와 3 개의 최신 이벤트 (그 작품). 다음은 지금까지 내 코드입니다 :keystone.js : 색인 페이지에서 두 가지 모델의 콘텐츠를 표시하는 방법
이 내 이벤트 모델
var keystone = require('keystone');
var Types = keystone.Field.Types;
/**
* Event Model
* ==========
*/
var Event = new keystone.List('Event', {
map: { name: 'title' },
autokey: { path: 'slug', from: 'title', unique: true },
});
Event.add({
title: { type: String, required: true },
state: { type: Types.Select, options: 'draft, published, archived', default: 'draft', index: true },
author: { type: Types.Relationship, ref: 'User', index: true },
publishedDate: { type: Types.Date, index: true, dependsOn: { state: 'published' } },
image: { type: Types.CloudinaryImage },
content: {
brief: { type: Types.Html, wysiwyg: true, height: 150 },
extended: { type: Types.Html, wysiwyg: true, height: 400 },
},
eventcategories: { type: Types.Relationship, ref: 'EventCategory', many: true },
});
Event.schema.virtual('content.full').get(function() {
return this.content.extended || this.content.brief;
});
Event.defaultColumns = 'title, state|20%, author|20%, publishedDate|20%';
Event.register();
그리고
var keystone = require('keystone');
var Types = keystone.Field.Types;
/**
* slider Model
* ==========
*/
var Slider = new keystone.List('Slider', {
map: { name: 'title' },
autokey: { path: 'slug', from: 'title', unique: true },
});
Slider.add({
title: { type: String, required: true },
image: { type: Types.CloudinaryImage },
});
Slider.register();
두 모델은 백엔드에서 제대로 작동이 내 슬라이더 모델이며, 그것은 단지 문제가 될한다 보기에서 ... 여기 인덱스보기가 표시됩니다.
var keystone = require('keystone');
exports = module.exports = function (req, res) {
var view = new keystone.View(req, res);
var locals = res.locals;
// Init locals
locals.section = 'eventblog';
locals.filters = {
eventcategory: req.params.category,
};
// Set locals
locals.section = 'slider';
locals.data = {
titles: [], //maybe this is a problem?
images: [], //maybe this is a problem?
events: [],
eventcategories: [],
}
// locals.section is used to set the currently selected
// item in the header navigation.
locals.section = 'home';
view.on('init', function (next) {
var q = keystone.list('Event').paginate({
page: req.query.page || 1,
perPage: 3,
maxPages: 1,
filters: {
state: 'published',
},
})
.sort('-publishedDate')
.populate('author categories');
if (locals.data.eventcategory) {
q.where('categories').in([locals.data.eventcategory]);
}
q.exec(function (err, results) {
locals.data.events = results;
next(err);
});
});
// Render the view
view.render('index');
};
그리고 여기 내 index.hbs가 있습니다.
<div class="container">
<div class="my-slider">
<ul>
{{#each slider}}
<!-- doesn't loop even once-->
<li>
<img src="{{cloudinaryUrl image width='300' height='300'}}" >
<p>{{title}}</p>
</li>
{{/each}}
</ul>
</div>
<!-- the code below works correctly -->
<div class="events row">
{{# each data.events.results}}
<div class="col-md-4 col-lg-4">
<h3><a href="{{eventUrl slug}}">{{{title}}}</a></h3>
<p class=" text-muted">{{{categoryList categories prefix="Posted in "}}}
{{#if author.name.first}}by {{author.name.first}}{{/if}}
</p>
{{#if image}}<img src="{{{cloudinaryUrl image height=160 crop='fit' }}}" class="img center-block">{{/if}}
<p>{{{content.brief}}}</p>
{{#if content.extended}}<p class="read-more"><a href="{{eventUrl slug}}">Read more...</a></p>{{/if}}
</div>
{{/each}}
</div>
</div>
은 정말 내 질문에 분명 누군가가 경로의 코드는 당신이 핸들에서 사용할 수 있습니다 이유입니다 locals.data.events
을 설정 나에게
이 주셔서 감사합니다 힌트. 나는 그들을로드하는 것을 잊었다. 그것은 당신의 코드와 함께 작동하지 않았지만 그것은 view.query ('sliders', keystone.list ('Slider'). model.find(). sort ('sortOrder')); in the index.js (routes/views/index.js) –
아, 제 생각에 광산은'next()'를 호출하기 때문에'view.on' 비트가 끝날 때 붙여 넣기 만하면 효과가 없을 수도 있습니다. 이벤트를 채운 후에 'q.exec' 함수에서'next (err);'앞에 쓰면 제대로 작동 했어야합니다. 그것이 작동하는 한 그것은 정말로 중요하지 않습니다, 나는 생각한다. –