0

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

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

<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

4

2 回答 2

2

如果您确定要为此使用 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" : "");
}

...

于 2013-12-09T18:09:24.290 回答
0

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

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";
}
于 2015-02-01T18:56:13.770 回答