Javascript 在iron router中使用查询参数修改模板
我试图根据querystring参数中发送的值向列表项添加一个类,但我在计算事物的运行顺序和将数据传递到正确的位置时遇到了问题 在我的模板中,我有以下片段Javascript 在iron router中使用查询参数修改模板,javascript,meteor,iron-router,Javascript,Meteor,Iron Router,我试图根据querystring参数中发送的值向列表项添加一个类,但我在计算事物的运行顺序和将数据传递到正确的位置时遇到了问题 在我的模板中,我有以下片段 <ul id="reviews"> <li> <label class="great"><span></span><input type="radio" name="review" value="Great" placeholder="Great">Great
<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>
调用函数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进行此操作,那么您可能可以让它与以下内容一起工作:
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>
但总的来说,这似乎不是流星式的做事方式
为什么不试试这样的东西:
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>
…最简单的方法是扩展您的数据函数以包含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>
我正在研究一个使用全局var的解决方案,并在路线的after函数中设置该值,设置会话属性是否更好?是的,因为会话属性是考虑反应性的。使用全局变量时,必须手动跟踪依赖项。
Template.reviews.greatselected = function() {
return this.review === "Great";
}