knockoutjs，可觀察更新彼此

我視圖模型用3個字段knockoutjs，可觀察更新彼此

dateStart = ko.observable(); 
dateEnd = ko.observable(); 
days = ko.observable();

假設的startDate被選擇時，只要選擇了結束日期天字段需要更新（天=結束日期 - 的startDate）。

此外，當days字段更新時，我需要計算endDate（endDate = startDate + days）。

這個怎麼用knockoutjs來完成？

謝謝！

我試過 http://jsfiddle.net/NfG4C/6/，但是我的js總是拋出太多的遞歸異常。

來源

2013-03-17 shkipper

據我所知，你基本上需要2件事。

你要計算的「天」字段中，每當有人選擇「結束日期」 [假設他們選擇了「的startDate」 ofcourse]
要重新計算了「結束日期」字段中，每當有人改變了「天」字段來解決這個問題是使用「可寫」計算的可觀測 [http://knockoutjs.com/documentation/computedObservables.html]

的一種方式。請仔細閱讀鏈接以瞭解詳細信息，但總的來說，「可計算可觀察值」是基於某些「其他」可觀察值「計算」的值，反之亦然。

我冒昧地修改你的小提琴，並將「天」改爲計算的可觀察。請看看：http://jsfiddle.net/dJQnu/5/

this.days = ko.computed({ 
    read: function() { 
     //debugger; 
     // here we simply need to calculate the days as => (days = endDate - startDate) 
     if (that.dateStart() && that.dateEnd()) { 
      var vacDayCounter = 0; 
      for (var curDate = new Date(that.dateStart()); curDate <= that.dateEnd(); curDate = curDate.addDays(1)) { 
       if (isDateCountsAsVacation(curDate)) { 
        vacDayCounter++; 
       } 
      } 
      //that.days(vacDayCounter); 
      return vacDayCounter; 
     } 
    }, 
    write: function (newDays) { 
     if (newDays && !isNaN(newDays) && that.dateStart()) { 
      var tmpEndDate = new Date(that.dateStart()) 
      appliedDays = 0; 
      while (appliedDays < newDays) { 
       if (isDateCountsAsVacation(tmpEndDate)) { 
        appliedDays++; 
       } 
       tmpEndDate = tmpEndDate.addDays(1); 
      } 
      if (tmpEndDate) { 
       that.dateEnd(tmpEndDate); 
      } 
     } 
    } 
});

如果你發現，我只是重用你的代碼（邏輯）的讀取和寫入的一部分。在讀取期間，我們正在「計算」observable自身的值，在這種情況下是「days」，在寫入期間（隨時在用戶更改實際的「days」輸入值時觸發），我們正在重新計算「dateEnd」字段。

如果您有任何其他問題，請讓我知道。

希望這會有所幫助。

謝謝。

來源

2013-03-17 14:07:16 CMR

thx答覆先生）我認爲這就是我尋找的解決方案。 – shkipper 2013-03-17 14:35:44

不客氣。 :-) – CMR 2013-03-17 15:56:58

你會得到一個recusive問題，因爲從訂閱更新observables時也會觸發observables訂閱方法。

您需要添加一個第四個成員，updatedFromSubscriber

它設置爲從TBE假開始，在每個認購方法只更新觀察到前加

if(this.updatedFromSubscriber) 
return;

，做

this.updatedFromSubscriber = true

更新可觀察值後將其設置爲false

來源

2013-03-17 11:59:51 Anders

knockoutjs，可觀察更新彼此

回答

相關問題