流星模板在使用后退按钮或铁路由后没有反应

Meteor template not reactive after using back button or Iron routing

本文关键字:路由 有反应 按钮 流星      更新时间:2023-09-26

我有一个简单的模板,显示网站列表和详细信息页面,允许用户发布有关该网站的评论。出于某种原因,当单击浏览器中的后退按钮或 Iron 路由器链接到另一个页面然后再次返回时,评论的更新功能不再被动。集合已更新,但不会呈现到模板。控制台中不会引发任何错误。

我怀疑我的助手有问题,但我是一个彻头彻尾的菜鸟,并且已经挣扎了 7 天或更长时间才能理解流星、蒙戈、反应......在参加了一个简短的课程后....

我更新集合的代码:

Template.website_details_form.events({
    "submit .js-add-comment": function(event) {
        var post, theID;
        post = event.target.post.value;
        theID = this._id;
        console.log("the post:" +post);  
        console.log("this is the id: " +theID);
        if(Meteor.user()) {     
             var user = Meteor.user().username;
             if (post != ""){
                 Websites.update({_id: theID}, {$addToSet:{comments:{user:user, comment:post}}});
                 $('input#post').removeClass('error');
             } else{
                 $('input#post').addClass('error');   
             }
         } else {
             swal("Please sign in to post!", "Oops...", "error");
         }      
         event.preventDefault();
     }
});

我的助手承认时髦的助手:

var details_ID;
var thecomments; 
Template.website_details.helpers({
    sites:function() {      
        if(details_ID === undefined) {
            return Websites.find(
                { title: 'Goldsmiths Computing Department' });
        } else {            
           return Websites.find({_id:details_ID});
        }                
     }
}); 
Template.website_details_item.helpers({
    comments:function() {
        if(thecomments === undefined) {
            var c = Websites.find({title: 'Goldsmiths Computing Department'}).fetch();
            return c[0].comments;
         } else {
            return thecomments;
         }
     }
});
Template.website_details_form.helpers({
    identify:function(){
    if(details_ID === undefined){
        return Websites.find({ 
            title: 'Goldsmiths Computing Department' });
        } else {            
            return Websites.find({_id:details_ID});
        }            
     }
});

我的路由器:

Router.route('/website_details', function () {
    this.render('navBar', {to: 'navbar' });    
    this.render('website_details', {to: 'main'});
});

我正在使用文档上的单击函数来获取我在帮助程序中使用的变量的信息......this._id

我确实看到了另一个问题,该问题专门询问了使用后退按钮和铁路由后的反应性,但该线程在几乎没有交互的 github 页面上终止,并解决了我没有的问题......据我所知...我是个菜鸟...提前谢谢。

查看代码,我发现:

  1. Template.website_details_form.events中,Websites集合正在正确更新。
网站.更新({//保存到收藏   _id : 身份证}, {   $addToSet : {      评论 : {         用户 : 用户,         评论 : 帖子      }   }});
  1. 但是,在Template.website_details_item.helpers中,注释数据是从Session而不是Websites集合中读取的。
...注释: 函数(){   var post = Session.get('site');从会话中读取   返回帖子评论;},...

解决此问题的两个建议

  1. helpers 访问数据时,直接从 Websites 集合中读取它:
var site_data = Websites.findOne({   _id:某某ID});if(site_data) {//检查comments_data是否未定义   返回site_data.评论;} else {   返回空值;}
  1. 更新Websites集合时,请立即更新Session数据:
网站.更新({//保存到收藏   _id : 身份证}, {   $addToSet : {      评论 : {         用户 : 用户,         评论 : 帖子      }   }}, function(err, data) {      if(!err) {         var site_data = Session.get('site');        /* 修改site_data */        Session.set('site', site_data);      }});

我建议第一种选择,因为它避免在Session中存储大量数据,并且因为客户端 minimongo 集合已经存储了相同的数据。