流星中的模板在添加新数据时没有反应？答案

【问题标题】：Template not reactive in meteor on adding new data?流星中的模板在添加新数据时没有反应？
【发布时间】：2018-05-20 00:11:39
【问题描述】：

这是我的两个模板的事件监听器，在 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函数在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 它首先显示网页中可用的网站。单击此用户将被路由到新页面。用户可以在此处为网站添加 cmets

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

});

【问题讨论】：

您是否正在发布 cmets 集合并在客户端中订阅它？浏览器控制台中的comments.findOne() 给了你什么？
你能分享你的订阅功能吗？
我已经编辑了上面的描述......请看代码
这是问题描述链接coursera.org/learn/meteor-development/peer/qazr8/…
您仍然没有显示您发布/订阅的部分。我怀疑这就是这里发生的事情。您可以插入东西，但永远无法检索它们并在客户端上显示它们。在您的 cmets 助手中，在您的 return Comments.find({siteId:siteId}) 之前放置一个 console.log(Comments.find({siteId:siteId}).fetch()) 并查看它是否实际输出任何内容。如果这是来自 courseera，那么您可能还没有打到他们谈论 pub/sub 的部分，这表明自动发布仍在进行中。你有.meteor/packages 下列出的自动发布包吗？

标签： mongodb meteor iron-router

【解决方案1】：

这就是你的模板应该是这样的：（我删除了更安全的电子邮件。它出错了。不确定它是否是你正在处理的其他东西。）

<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>

助手：

您的帮助函数旨在将 siteId 作为输入，但您并未将其传递给它。
this._id 或 Router.current().params._id 将为您提供您正在寻找的 siteId。您使用了this.site._id，它曾经因为this.site 无效而出错。您可以通过执行console.log(this) 进一步查看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});
}

【讨论】：