Knockout.js - 從擴展器或其他方式改變其他observables從擴展或其他方式做類似

我一直在做一些簡單的淘汰賽的事情，但這一個感覺更復雜。客戶希望能夠通過下拉菜單控制表單中訂單行的數量（我問他們爲什麼不想要一個常規的添加按鈕，但他們表示這會讓他們更好地瞭解一切都已填滿出...）。Knockout.js - 從擴展器或其他方式改變其他observables從擴展或其他方式做類似

我有一個可觀察的持有下拉的值和一個observableArray來保存訂單行，但我不得不確認選擇的目的是當新值小於以前。

因此，我開始在互聯網上尋找技巧和竅門，如何實現這一目標。首先我發現this "confirmable" extender。它幫助我顯示一個確認對話框，如果他們選擇的行數小於先前的值，但是我發現無法與視圖模型中的其他觀察者交互。

於是我Google多了一些，發現the first answer from Michael Best here。使用「subscribeChanged」函數，我現在可以（在可確認的擴展器完成其部分之後）將行添加或移除到可觀察的訂單行數組中。

但是，我希望有一些更好的方法來完成這個任務，以便在多個地方沒有幾乎精確的代碼。因爲現在我在擴展

if (!isValidateInteger(current) && isValidateInteger(newValue)) { 
    target(newValue); 
    // TODO: Add rows to vm.orderRows so the count reflects newValue 
}

這個代碼subscribeChanged功能有這樣的代碼

if (!isValidateInteger(current) && isValidateInteger(newValue)) { 
    // NOTE: Add rows to vm.orderRows so the count reflects newValue 
    difference = (newValueInt - currentInt); 
    message += '<br />Add ' + difference + ' row(s).'; 
    for (var i = 0; i < difference; i++) { 
     vm.orderRows().push(new OrderRow()); 
    } 
    vm.orderRows.valueHasMutated(); 
}

我已經與我今天的代碼的摘錄放在一起this fiddle。

我知道一些if語句不需要在那裏，但它們目前只是爲了調試目的。當功能完成和測試時，我會考慮刪除哪些內容，但是歡迎任何指針（即使是與問題無關的指針）。

由於提前，路德維希

來源

2014-05-02 Ludvig Sjöbeck

您可以使用一個計算可觀測到兩個使用確認和更新，如果確定：

vm.enhancedNumberOfOrderRows = ko.computed({ 
    read: vm.numberOfOrderRows, 
    write: function(newValue) { 
     //do all your checks, update vm.numberOfOrderRows only if you want 
    } 
});

見爲例：http://jsfiddle.net/v3EAz/2/

編輯：你要叫vm.numberOfOrderRows.valueHasMutated();如果用戶取消更新選擇的值。

參見：http://jsfiddle.net/v3EAz/3/

來源

2014-05-02 13:04:12

但是，如果您點擊取消，下拉菜單仍然保持「新值」。如果您選擇2，則會添加2行。然後，您選擇1並單擊取消，即使沒有刪除行，下拉列表仍將顯示1。這是接近我正在尋找tho :) –

編輯回答。事實上，即使可觀察值的值沒有改變，選擇也會保持其新值。在這種情況下，你可以調用'vm.numberOfOrderRows.valueHasMutated（）;'。 –

我喜歡這個答案。保持請求的功能並刪除1個步驟。感謝您的快速幫助 –

的擴張可能不適合您的方案最合適的。看起來好像讓你跳過不必要的環節，擴展邏輯是針對你的viewmodel/screen的，它不是一個通用的擴展器，可以在其他情況下重用。

更簡單的方法可能是使用淘汰賽觀察到的subscribe功能來監聽更改numberOfOrderRows並作出相應的反應。

var vm = { 
    numberOfOrderRows: ko.observable(''), 
    orderRows: ko.observableArray(), 
}; 

vm.numberOfOrderRows.subscribe(
... todo write a numberOfOrderRowsChanged handler function to do the following: 
1) validate the new value 
2) perform any user confirmation logic 
3) if successful, update the orderRows observable 
4) if unsuccessful, restore the previous value to numberOfOrderRows

來源

2014-05-02 12:18:01

但是路德維希不希望用戶如果在確認 –

就像GOTO寫我需要確認選擇的確是故意取消更新視圖模型。你將如何去編寫這個處理函數？我使用擴展器的原因是因爲它是搜索代碼時的第一次命中，如果用戶單擊取消確認，就會讓我「中止」。我發現了另一個可以訪問舊值和新值的訂閱函數，但是如果我記得正確的話，它已經設置了新的值。 –

Knockout.js - 從擴展器或其他方式改變其他observables從擴展或其他方式做類似

回答

相關問題