在添加新数据时,模板在流星中不起作用?

时间:2017-12-06 07:10:46

标签: mongodb meteor iron-router

这是我在events.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;
 }
});

路由器功能在router.js

中指定
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包含集合 //共享代码

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>

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);
    }

});

1 个答案:

答案 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._idRouter.current().params._id会为您提供您正在寻找的siteId。由于this.site._id无效,您曾使用this.site错误输出。您可以通过执行this进一步查看console.log(this)对象包含的内容。这可以帮助你更快地解决这个问题。
  3. '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});
    }