Question

我正在尝试根据我的查询字符串参数中发送的值向列表项添加一个类，但是我无法计算出事物的运行顺序并将数据传递到正确的位置。< / p>

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

<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

如果您确定要使用铁路由器，那么您可以使用这样的东西：

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

...

Answer 2

最简单的方法是扩展您的数据功能以包含审核参数：

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

在铁路由器中使用查询参数修改模板

2 个答案: