javascript - 在iron-router中使用查询参数修改模板

Question

我正在尝试根据查询字符串参数中发送的值将类添加到列表项，但我无法确定事物的运行顺序并将数据传递到正确的位置。

在我的模板中，我有以下片段

<ul id="reviews">
  <li>
    <label class="great"><span></span><input type="radio" name="review" value="Great" placeholder="Great">Great</label>
  </li>
  <li>
    <label class="fair"><span></span><input type="radio" name="review" value="Fair" placeholder="Fair">Fair</label>
  </li>
  <li>
    <label class="not-good"><span></span><input type="radio" name="review" value="Not good" placeholder="Not good">Not good</label>
  </li>
</ul>

在我的客户端 JavaScript 中，我有以下路由器配置:

Router.map(function () {
  this.route('review', {
  path: '/',
  template: 'review',
  data: function () {
    var params = this.params;
    return {
      fullname : params.fullname,
    }
  },
  after: function() {
    var params = this.params;

    setReview(params.review);

  }
});

调用函数setReview:

function setReview(review) {
  console.log('setReview called with: '+review);
  switch(review) {
    case "Great":
      console.log($('#reviews'));
      $('#reviews').find('.great').addClass('selected');
      $('#reviews').find('.great').find('input').prop('checked', true);
      break;
    case "Fair":
      $('#reviews').find('.fair').addClass('selected');
      $('#reviews').find('.fair').find('input').prop('checked', true);
      break;
    case "Bad":
      $('#reviews').find('.not-good').addClass('selected');
      $('#reviews').find('.not-good').find('input').prop('checked', true);
      break;
  }
}

最后一个函数被调用，但无法正常工作，因为 $('reviews') 在页面上找不到正确的元素，但似乎返回了整个文档。

看起来这一切都发生在页面渲染之前，因此它还找不到我的列表。

我应该有更好的方法来做这种事情吗？

TIA

Answer 1

如果您确定要使用iron-router来实现此目的，那么您也许可以让它与类似这样的东西一起工作:

Router.map(function () {
  this.route('review', {
  path: '/',
  template: 'review',
  after: function() {
    Session.set('params', this.params);
  }
});

Template.reviews.rendered = function() {
    setReview(Session.get('params');
};

但总的来说，这看起来不太像 Meteor 的做事方式。

为什么不尝试这样的事情:

<ul id="reviews">
  <li>
    <label class="great {{greatselected}">
       <span></span>
       <input type="radio" name="review" value="Great" 
              placeholder="Great" {{greatchecked}}>Great</label>
  </li>
  .....
</ul>

然后说:

Template.reviews.greatselected = function() {
   return (Session.get('params').review == "Great" ? "selected" : "");
}

Template.reviews.greatchecked = function() {
   return (Session.get('params').review == "Great" ? "checked" : "");
}

...