跟踪器afterFlush错误:无法在模板呈现的回调中从数据上下文读取属性的值 [英] Tracker afterFlush error : Cannot read value of a property from data context in template rendered callback

问题描述

我正在制作一个简单的Meteor应用，当用户单击链接时，该应用可以重定向到页面. 在重定向"模板上，我尝试从模板实例获取属性"url"的值.但是，我只有在第一次单击链接时才能获得正确的价值.当我按F5刷新重定向"页面时，我不断收到此错误消息:

I'm making a simple Meteor app that can redirect to a page when user click a link. On 'redirect' template, I try get the value of property 'url' from the template instance. But I only get right value at the first time I click the link. When I press F5 to refresh 'redirect' page, I keep getting this error message:

来自Tracker afterFlush函数的异常:无法读取null的属性"url" TypeError:无法读取null的属性"url" 在Template.redirect.rendered( http://localhost:3000/client/redirect. js?abbe5acdbab2c487f7aa42f0d68cf612f472683b:2:17 ) 为空.

Exception from Tracker afterFlush function: Cannot read property 'url' of null TypeError: Cannot read property 'url' of null at Template.redirect.rendered (http://localhost:3000/client/redirect.js?abbe5acdbab2c487f7aa42f0d68cf612f472683b:2:17) at null.

这是debug.js指向的位置:(第2行)

This is where debug.js points to: (line 2)

 if (allArgumentsOfTypeString)
      console.log.apply(console, [Array.prototype.join.call(arguments, " ")]);
    else
      console.log.apply(console, arguments);

  } else if (typeof Function.prototype.bind === "function") {
    // IE9
    var log = Function.prototype.bind.call(console.log, console);
    log.apply(console, arguments);
  } else {
    // IE8
    Function.prototype.call.call(console.log, console, Array.prototype.slice.call(arguments));
  }

您能告诉我为什么我无法在模板呈现的回调中从模板数据上下文读取'url'属性的值吗?

Can you tell me why I can't read the value of 'url' property from template data context in template rendered callback?

这是我的代码(有关更多详细信息，您可以访问我的 repo ):

This is my code (for more details, you can visit my repo):

HTML:

<template name="layout">
  {{>yield}}
</template>

<template name="home">
  <div id="input">
    <input type="text" id="url">
    <input type="text" id="description">
    <button id="add">Add</button>
  </div>
  <div id="output">
    {{#each urls}}
      {{>urlItem}}
    {{/each}}
  </div>
</template>

<template name="redirect">
  <h3>Redirecting to new...{{url}}</h3>
</template>

<template name="urlItem">
  <p><a href="{{pathFor 'redirect'}}">
    <strong>{{url}}: </strong>
  </a>{{des}}</p>
</template> 

home.js

Template.home.helpers({
  urls: function(){
    return UrlCollection.find();
  }
});
Template.home.events({
  'click #add': function() {
    var urlItem = {
      url: $('#url').val(),
      des: $('#description').val()
    };

    Meteor.call('urlInsert', urlItem);
  }
});

redirect.js

redirect.js

Template.redirect.rendered = function() {
  if ( this.data.url ) {
    console.log('New location: '+ this.data.url);
  } else {
    console.log('No where');
  }
}
Template.redirect.helpers({
  url: function() {
    return this.url;
  }
});

router.js

router.js

Router.configure({
  layoutTemplate: 'layout'
})
Router.route('/', {
  name: 'home',
  waitOn: function() {
    Meteor.subscribe('getUrl');
  }
});
Router.route('/redirect/:_id', {
  name: 'redirect',
  waitOn: function() {
    Meteor.subscribe('getUrl', this.params._id);
  },
  data: function() {
    return UrlCollection.findOne({_id: this.params._id});
  }
});

publication.js

publication.js

Meteor.publish('getUrl', function(_id) {
  if ( _id ) {
    return UrlCollection.find({_id: _id});
  } else {
    return UrlCollection.find();
  }
});

推荐答案

在同事的帮助下，我可以解决问题. 我的问题来自错误的Meteor.subscribe语法.在我的代码中，我忘记了waitOn函数中的返回".这将使Meteor不知道何时完全加载数据. 这是正确的语法:

With help from my colleague, I can solve the problem. My problem comes from wrong Meteor.subscribe syntax. In my code, I forget "return" in waitOn function. This will make Meteor do not know when the data is fully loaded. Here is the right syntax:

waitOn: function() {
  return Meteor.subscribe('getUrl', this.params._id);
}

这篇关于跟踪器afterFlush错误:无法在模板呈现的回调中从数据上下文读取属性的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！