用鐵路由器中的查詢參數修改模板

我想添加一個類到一個列表項，這取決於通過我的查詢字符串參數發送的值，但是我在處理事務的運行順序和傳遞我的數據通過正確的地方。用鐵路由器中的查詢參數修改模板

在我的模板

，我有以下片段

<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

來源

2013-12-09 Blaise

如果你一定要使用鐵路由器這一點，那麼你也許可以得到它的是這樣工作的：

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

...

來源

2013-12-09 18:09:24

我使用的是全局變量尋找一個解決方案，並設置在我的路線的_after_函數值，將設置_Session_財產會更好嗎？ – Blaise

是的，因爲會話屬性被認爲是反應性的。有了全局變量，你必須手動跟蹤依賴關係。 –

最簡單的是將延長數據的功能，包括審查參數：

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

然後繼續爲@基督教弗裏茨提示：

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

和

Template.reviews.greatselected = function() { 
    return this.review === "Great"; 
}

來源

2015-02-01 18:56:13

用鐵路由器中的查詢參數修改模板

回答

相關問題