2017-12-06 12 views
0

이 // 라우터 기능이새 데이터를 추가 할 때 템플릿이 유성에서 반응하지 않습니까?

Router.configure({ 
    layoutTemplate: 'ApplicationLayout' 
}); 

// the main route. showing the list of sites. 
Router.route('/', function() { 
    this.render('siteList'); 
}); 

// this route is for the discussion page for a site 
Router.route('/discussSite/:_id', function() { 
    var siteId = this.params._id; 
    site = Websites.findOne({_id:siteId}); 
    this.render('discussSite', {data:site}); 
}); 

main.js는 컬렉션 를 포함 router.js에 지정된

// event listeners on the addSiteForm template 
Template.addCommentForm.events({ 
    // this runs when they click the add button... you need to compete it 
'click .js-add-comment':function(event){ 
    var comment_text = $('#comment_input').val();// get the form value using jquery... 
    var user = 'anonymous person'; 
    // the 'this' variable contains 
    // the data that this template is displaying 
    // which is the Website item 
    var site = this; 
    if (Meteor.user()){ 
     user = Meteor.user().emails[0].address 
    } 
    var comment = {"text":comment_text, 
        "siteId":site._id, 
       "createdOn":new Date(), 
       "createdBy":user};// create a simple object to insert to the collectoin 
    Comments.insert(comment); 
    console.log("events start"); 
    console.log("totla coomets are "+Comments.find({}).count()+"\n"); 
    console.log("commenst in site "+Comments.find({siteId:site._id}).count()+"\n"); 
    console.log("site id is "+site._id); 
    console.log("events end"); 

    return false; 
} 
}); 

// event listeners on the addSiteForm template 
Template.addSiteForm.events({ 
    // this runs when they click the add button... you need to compete it 
'click .js-add-site':function(event){ 
    var url = $('#url_input').val();// get the form value using jquery... 
    var user = 'anonymous person'; 
    if (Meteor.user()){ 
     user = Meteor.user().emails[0].address 
    } 
    var site = {"url":url, 
       "createdOn":new Date(), 
       "createdBy":user};// create a simple object to insert to the collectoin 
    Websites.insert(site); 
    return false; 
} 
}); 

events.js에 지정된 내 두 템플릿에 대한 이벤트 리스너입니다 공유 코드

Websites = new Mongo.Collection("websites"); 
Comments = new Mongo.Collection("comments"); 

헬퍼

입니다은
// this helper gets the data from the collection for the site-list Template 
Template.siteList.helpers({ 
    'all_websites':function(){ 
     return Websites.find({}); 
    }, 
    'safer_email':function(email){ 
     if (email.indexOf('@')!=-1){// we have an email 
      return email.split('@')[0]; 
     } 
     else{// probably anonymouse. 
      return email; 
     } 
    } 
}); 

Template.discussSite.helpers({ 

'comments':function(siteId){ 
//console.log("helper comments "+this.site); 
// complete the code here so that it reruns 

    console.log(this.params.site._id); 
return Comments.find({siteId:siteId}); 

// all the comments with a siteId equal to siteId. 

} 

}); 

HTML 파일은 main.html.here에서 먼저이 사용자는 사용자가 웹 사이트

<head> 
    <title>week_4_peer_assessment</title> 
</head> 

<body> 
</body> 

<!-- this is the template that iron:router renders every time --> 
<template name="ApplicationLayout"> 
    <div class="container"> 
     <a href="/">Home</a> 
     {{>loginButtons}} 
     <h1>SiteAce - discuss your favourite websites</h1> 
     <!-- iron router will select what to render in place of yield--> 
     {{> yield }} 
    </div> 
</template> 

<template name="discussSite"> 
    <h3>Discussing: {{url}} </h3> 
    {{> addCommentForm}} 

    <!-- write some code here that iterates through the comments and displays 
    the comment text and the author --> 
    <!-- clue - you have already written the 'comments' helper function --> 

    <ul> 
    {{#each comments}} 
    <li>{{text}} (added by {{safer_email createdBy}}) 

    </li> 
    {{/each}} 
    </ul> 

</template> 


<template name="addCommentForm"> 
<div class="row"> 
    <div class="col-lg-6"> 
    <div class="input-group"> 
     <input type="text" id="comment_input" class="form-control" placeholder="Enter your comment"> 
     <input type="hidden" id="site_id" class="form-control" placeholder="Enter your comment"> 

     <span class="input-group-btn"> 
     <button class="btn btn-default js-add-comment" type="submit">Add!</button> 
     </span> 
    </div><!-- /input-group --> 
    </div><!-- /.col-lg-6 --> 
</div> 
</template> 


<template name="siteList"> 
    Fill in the form and click submit to add a site: 

    {{>addSiteForm}} 

    <h3>Sites you have added:</h3> 
    <ul> 
    {{#each all_websites}} 
    <li>{{url}} (added by {{safer_email createdBy}}) 
     <br/><a href="/discussSite/{{_id}}">discuss</a> 
     <br/><a href="{{url}}">visit site</a> 
    </li> 
    {{/each}} 
    </ul> 
</template> 

<template name="addSiteForm"> 
<div class="row"> 
    <div class="col-lg-6"> 
    <div class="input-group"> 
     <input type="text" id="url_input" class="form-control" placeholder="Enter website URL..."> 
     <span class="input-group-btn"> 
     <button class="btn btn-default js-add-site" type="submit">Add!</button> 
     </span> 
    </div><!-- /input-group --> 
    </div><!-- /.col-lg-6 --> 
</div> 
</template> 
에 대한 설명을 추가 할 수있는 새로운 page.Here로 라우팅 클릭 webpage.On에서 사용할 수있는 웹 사이트를 표시한다

starup.js 서버

Meteor.startup(function(){ 
    if (!Websites.findOne()){// nothing in the database yet 
     var site = {"url":"http://www.google.com", 
        "createdOn":new Date(), 
        "createdBy":"Michael"};// create a simple object to insert to the collectoin 
     Websites.insert(site); 
     site = {"url":"http://www.yeeking.net", 
        "createdOn":new Date(), 
        "createdBy":"Janet"};// create a simple object to insert to the collectoin 
     Websites.insert(site); 
     site = {"url":"http://www.coursera.org", 
        "createdOn":new Date(), 
        "createdBy":"Jose"};// create a simple object to insert to the collectoin 
     Websites.insert(site); 
    } 

}); 
+0

는 의견 수집을 게시하고 클라이언트에 등록가 있습니까? 브라우저 콘솔의'''comments.findOne()'''은 무엇을 제공합니까? – blueren

+0

서브 스크립 션 기능을 공유 할 수 있습니까? – cowCrazy

+0

위의 설명을 수정했습니다 .... 코드 –

답변

0

이 귀하의 템플릿을해야 무엇에 의해 실행되는 시작 코드가 포함되어 있습니다 : (나는 safer_email를 제거했습니다. 그것은 잘못되었습니다. 당신이 작업 중이던 다른 뭔가 있다면 확실하지 않음)

<template name="discussSite"> 
    <h3>Discussing: {{url}} </h3> 
    {{> addCommentForm}} 

    <!-- write some code here that iterates through the comments and displays 
    the comment text and the author --> 
    <!-- clue - you have already written the 'comments' helper function --> 
    <ul> 
    {{#each comments}} 

    <li>{{text}} (added by {{createdBy}})</li> 
    {{/each}} 
    </ul> 

</template> 

도우미 :.

  1. 도우미 기능이 입력으로 siteId에 걸릴 수 있도록 설계되어, 아직 당신이 하나를 통과하지 않습니다 그것.
  2. this._id 또는 Router.current().params._id 당신이 찾고있는 siteId를 얻을 수 있습니다. this.site._id을 사용했는데 오류가 발생하여 this.site이 유효하지 않습니다. this 개체에 무엇이 포함되어 있는지 더 자세히 보려면 ​​console.log(this)을 확인하십시오. 그건 당신이 빨리 정렬이 도움이 될 것입니다.

'comments':function(){ 

    console.log("site id in helper is ",this._id); // or Router.current().params._id; 
    console.log(Comments.find({siteId:this._id}).fetch()); 
    return Comments.find({siteId:this._id}); 
} 
+0

감사 ... 작동합니다 –