knockoutJS複選框和文本框一起工作

我有一個複選框和一個文本框（都啓用，複選框啓動未選中[false]）。我需要的是以下幾點：knockoutJS複選框和文本框一起工作

當我寫的東西在文本框中，離開它（失去焦點）的複選框會自動選中。
當我在文本框中寫入內容時，將其刪除並將其保留，複選框應保持爲未選中的。
當我在文本框中寫入內容並點擊複選框時，該複選框將被立即檢查，並且文本框中的數據不會被清除，並且文本框中的數據爲。
當我在文本框中寫入內容並點擊複選框兩次時，首先發生步驟3，然後取消選中複選框，並清除文本框中的數據。
當我點擊複選框時，複選框被選中，然後我寫入文本框並取消選中複選框，然後清除文本框中的數據。

到目前爲止我試過如下代碼：

//The checked property in the checkbox is binded to  
that.BuildingCriteria.IncludeLoadingDocks 
that.BuildingCriteria.IncludeLoadingDocks.subscribe(function (newValue) { 
       if (!that.updatingTextBox && !newValue) { 
        that.BuildingCriteria.LoadingDocksMin(null); 
       } 
      }); 

//The textbox value is binded to that.BuildingCriteria.LoadingDocksMin 
that.BuildingCriteria.LoadingDocksMin.subscribe(function (newValue) { 
       that.updatingTextBox = true; 
       that.BuildingCriteria.IncludeLoadingDocks(true); 
       that.updatingTextBox = false; 
      });

，如果你嘗試所有上述步驟，對所有的人，但那時，當你嘗試一些他們的這個工作再次停止了工作一些......特別是如果你在文本框中寫了一些東西，並且複選框沒有選中，然後離開文本框，它不會自動檢查複選框。我嘗試使用標誌，因爲你可以看到，但我不能讓它工作在所有的情況下總是。我一直在爲此工作幾天，所以如果你能儘快幫助我，我會很感激！在此先感謝！

來源

2013-06-01 user2141475

第一個和第二個彼此矛盾。你試圖達成什麼目標？ –

第二@TomasKirda，可能有助於知道*爲什麼*你需要這個。要求3也「感覺」，就像在其後面有一個要求*可以通過其他方式解決。 – Jeroen

幾乎不可能直接回答你的問題，但從它我覺得最接近的事情可能是要注意幾個KO功能，你可能還需要考慮。

的value binding支持valueUpdate = 'afterkeydown'版本，這樣可以讓你保持你的文本框和複選框中同步實時。這可以很好地消除對需求3的需要。
computed observable支持專門的read和write操作，有時可能會比使用subscription更清晰。
如果您的必須必須符合要求3，您可能需要爲複選框引入「寬限期」。只是不允許在離開文本框後不久更新複選框。 throttle extender和hasfocus binding可以幫助你。

有一個great blogpost何時使用哪個功能。

無論如何，如果沒有業務案例，您的要求有點難以理解，甚至可能是您遇到XY-problem。從您的實施要求我承擔這樣功能（不實現）要求：

有一個文本框，以保持實際訂單/繞圈/名/不管。
有一個複選框來表明這樣的命令/ etc是通緝。
- 此複選框應與用戶是否鍵入一些文本同步（選中）。
- 如果用戶清空文本框，此複選框應該同步（未選中）。
如果用戶檢查複選框，然後
- 如果有文字順序的/ etc它應該被清除。
- 如果沒有文本，應該建議使用默認命令/ etc。

這裏的a jsfiddle與你如何能接近這些功能需求的演示。爲了完整起見，這裏的相關代碼，從View：

<input type="checkbox" data-bind="checked: isChecked" /> 
<input type="textbox" data-bind="value: someText, valueUpdate: 'afterkeydown', selectSuggestion: someText" />

自定義選擇「默認的建議文本」結合：

var suggestion = "<enter something>"; 

ko.bindingHandlers.selectSuggestion = { 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var currentText = ko.utils.unwrapObservable(valueAccessor()); 
     if (currentText === suggestion) element.select(); 
    } 
};

和視圖模型：

var ViewModel = function() { 
    var self = this; 

    var privateIsChecked = ko.observable(false); 
    var privateText = ko.observable(""); 

    self.isChecked = ko.computed({ 
     read: privateIsChecked, 
     write: function(value) { 
      if (!privateIsChecked() && value && privateText() === "") { 
       privateText(suggestion); 
      } 
      if (privateIsChecked() && !value) { 
       privateText(""); 
      } 
      privateIsChecked(value); 
     } 
    }); 

    self.someText = ko.computed({ 
     read: privateText, 
     write: function(value) { 
      privateIsChecked(value !== ""); 

      privateText(value); 
     } 
    }); 
}

我知道，這不是直接回答你的問題，但像我說的是很難爲我們做Stack Overflow，而不瞭解你的業務案例。

來源

2013-06-01 09:17:00 Jeroen

knockoutJS複選框和文本框一起工作

回答

相關問題