在Meteor（datepicker）中用戶輸入更改時顯示數據的最佳方式是什麼？

Question

我不知道怎麼說這個，但基本上我正在實現一個日期選擇器，所以用戶可以選擇數據顯示的範圍。用戶選擇一個開始數據和結束日期，然後，我重新運行一個位於lib文件夾中的巨大功能來重新運行並更改主頁上通過Meteor幫助程序顯示的所有數據。

用戶選擇的日期存儲在會話變量中，這些變量可以在我打算使用的函數中訪問。該函數將運行，但客戶端上不會顯示任何更改（但控制檯中的這些更改都是真實的，並且我可以在整個函數中看到通過console.log聲明進行的更改）。

這是日期選擇器的功能onRendered什麼樣子：

Template.dashboard.onRendered(function(){ 
    // Date picker 
    $(function() { 

    function cb(start, end) { 
     $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 

     var startDate = start.format('MMMM D, YYYY'); 
     Session.set("startingDate", startDate) 
     var endDate = end.format('MMMM D, YYYY'); 
     Session.set("endingDate", endDate); 
    } 

    var firstDate = dates[0]; 
    var lastItem = dates.length-1; 
    var lastDate = dates[lastItem] 
    cb(moment(firstDate), moment(lastDate)); 

    $('#reportrange').daterangepicker({ 
     ranges: { 
      'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
      'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
      'This Month': [moment().startOf('month'), moment().endOf('month')] 
     } 
    }, cb); 

}); 

    }); 

的Tracker.autorun：

Tracker.autorun(function(){ 
    libFxn(); 
    }); 

libFxn()是我在跟蹤調用lib文件夾中的相當大的作用。所以，只要有一個Session變量由於用戶輸入而發生變化，Tracker.autorun火焰和函數就會運行並且值正在改變，我可以通過控制檯看到這些值。但是，在客戶端，我沒有看到這些變化。

這使我處於兩難境地：我需要顯示基於用戶輸入所產生的數據變化，但：

1）沒有出現在客戶端的變化，即使是正在執行的lib文件夾功能。 2）我不能使用document.location.reload(true);或以任何方式刷新頁面，因爲當頁面刷新時，會話變量將恢復爲默認值（這是我手邊的dates陣列的第一個日期和最後一個日期）。

所以我需要找出一種方法來發送用戶的日期輸入數據到lib文件夾中的函數，以便顯示客戶端/模板中不涉及Sessions的更改（如果頁面必須被刷新。

如果有人能給我提示或提示，我將不勝感激。

這裏是一個幫手，這基本上是相同的所有其他減去它調用不同的變量（所有這些變量都在libFxn()功能和被填充有和稱爲經由這些輔助功能）的例子：

WinRate: function(){ 
    if(Number((((wins/gamesPlayed))))){ 
     return numeral((wins/gamesPlayed)).format('0%'); 
    } else if(Number((((wins/gamesPlayed)))) === 0){ 
     return "0%" 
    } else{ 
     return "n/a"; 
    } 
    } 

Answer 1

從上面的評論你沒有使變量本身反應。您可以使用Tracker.Dependency來完成此操作。

在你的lib文件中，你會想要使用globalsDep = new Tracker.Dependency;或類似的，你可能會希望有一個從你的函數的每種類型的結果，即如果你可以獨立修改10個變量，那麼你會希望10，一個新的依賴否則每次都會重新運行每個值隨時間而變化的依賴於它們的幫助器。如果你想，當然一切都重新運行只需使用一個：

globalsDep = new Tracker.Dependency;

每個地方你修改相關的變量（或你的函數結束時，如果你只想要一個依賴），你需要告訴依賴它已經變得無效，需要重新計算

globalsDep.changed();

然後在每個要重新運行調用助手的依賴功能：

globalsDep.depends()

，你應該看到它們運行在視圖立竿見影。簡單的例子如下：

/**************** 
** In Lib File ** 
****************/ 
globalsDep = new Tracker.Dependency; 
xDep = new Tracker.Dependency; 

x = 15; 
y = 10; 
t = 0; 

myBigLongFunction = function(){ 
    x = x + 5; 
    y = y + 1; 
    t = x + y; 

    console.log('Changing Values', x, y, t); 
    globalsDep.changed(); 

    if (x > 20) 
    xDep.changed(); 
} 

/**************** 
** In JS File ** 
****************/ 
Template.main.helpers({ 
    testGlobalReactive: function(){ 
     globalsDep.depend(); 
     console.log('All vars rerun'); 
     return {t:t, x:x, y:y}; 
    }, 
    testXReactive: function(){ 
     xDep.depend(); 
     console.log('X rerun'); 
     return x; 
    } 
}); 

/**************** 
** In HTML File ** 
****************/ 
<template name="main"> 
    <div style="min-height:200px;width:100%;background-color:lightgrey;"> 
    {{#with testGlobalReactive}} 
     X:{{x}}<br><br> 
     Y:{{y}}<br><br> 
     T:{{t}}<br><br> 
    {{/with}} 
    X Individual: {{testXReactive}} 
    </div> 
</template> 

雖然我奉勸不要以這種方式爲客戶端狀態，您將得到更好的利用集合的反應性，並確保一切都同步的通過他們的服務器，存儲這種數據具有客戶端不會在任何地方持久存在，並且不能以任何方式信任，因爲客戶端可以隨意修改全局變量。如果你是從集合中的功能已經設置此數據忽略過去，但你可能還是要考慮訪問無論是在鐵路由器的數據字段或在模板級別從收集直接的數據，因爲它會反應在默認情況下，而不需要對Tracker.dependency：d