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

Modifying template with query params in iron-router

本文关键字：参数 修改 查询 iron router      更新时间：2024-05-26

我正试图根据querystring参数中发送的值将一个类添加到列表项中，但我在计算事物的运行顺序和将数据传递到正确的位置时遇到了问题。

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

<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

如果你确定你想使用iron路由器，那么你可能可以让它与这样的东西一起工作：

Router.map(function () {
  this.route('review', {
  path: '/',
  template: 'review',
  after: function() {
    Session.set('params', this.params);
  }
});
Template.reviews.rendered = function() {
    setReview(Session.get('params');
};

但总的来说，这似乎不像流星的做事方式。

为什么不试试这样的东西：

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

最简单的方法是扩展您的数据函数以包含评审参数：

data: function () {
  var params = this.params;
  return {
    fullname : params.fullname,
    review: params.review
  }
}

然后按照@christian fritz的建议进行：

<input type="radio" name="review" value="Great" 
          placeholder="Great" checked="{{greatchecked}}">Great</label>

和

Template.reviews.greatselected = function() {
  return this.review === "Great";
}
相关文章：