2017-02-22 3 views
0

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을 설정 나에게

답변

0

을 도울 수 있기를 바랍니다. 그러나 locals.slider을 설정하지 않으므로 {{#each slider}} 루프가 실행되지 않습니다. 경로에서

, 당신은 또한 당신의 HBS 템플릿에 {{#each slider}}을 할 수있는 당신이 그렇게 그 locals.slider을 채 웁니다

keystone.list('Slider').model.find().exec(function (err, results) { 
    locals.sliders = restuls; 
    next(err); 
} 

같은 것을 할 필요가있다. 나머지 코드는 정상적으로 작동합니다.

(면책 조항, 나는 실제로 테스트하지했지만, 그것이 작동해야합니다. 그렇지 않으면, 시도하고 무슨 일이 일어 났는지 작동합니다. 코드의 이러한 종류의 많은 예는 keystone demo project에 있습니다)

+0

이 주셔서 감사합니다 힌트. 나는 그들을로드하는 것을 잊었다. 그것은 당신의 코드와 함께 작동하지 않았지만 그것은 view.query ('sliders', keystone.list ('Slider'). model.find(). sort ('sortOrder')); in the index.js (routes/views/index.js) –

+0

아, 제 생각에 광산은'next()'를 호출하기 때문에'view.on' 비트가 끝날 때 붙여 넣기 만하면 효과가 없을 수도 있습니다. 이벤트를 채운 후에 'q.exec' 함수에서'next (err);'앞에 쓰면 제대로 작동 했어야합니다. 그것이 작동하는 한 그것은 정말로 중요하지 않습니다, 나는 생각한다. –