要求在淘汰賽中的價值

我是Knockout.js的新手，我正在努力學習它。爲了學習，我正在創建一個網頁。這個網頁上有一個搜索欄。默認情況下，搜索字段爲空。如果用戶輸入一個值然後刪除它，我想讓搜索框的背景變成紅色以表明它是必需的。當用戶點擊搜索按鈕時，我只想顯示一個基本的JavaScript警告框。如果查詢有值，只顯示「正在搜索'[query'」。如果用戶沒有提供查詢，我想顯示一條警告，提示「請輸入查詢。」。很普通的香草。要求在淘汰賽中的價值

目前，我有一個基本的形式，看起來像這樣：

<style type="text/css"> 
    .required { background-color:red; } 
</style> 

... 

<form id="searchForm"> 
    Search: <input data-bind="value:query, css: { required: (query != null && query.length > 0) }" /> 
    <input type="button" value="search" /> 
</form> 

... 

function searchViewModel() { 
    this.query = ko.observable(null).extend({ required:"" }); 
} 
ko.applyBindings(new searchViewModel()); 

ko.extenders.required = function(target, msg) { 
    target.hasError = ko.observable(); 
    function validate(newValue) { 
    target.hasError(newValue ? false : true); 
    } 
    validate(target); 
    target.subscribe(validate); 

    return target; 
}

我所需要的擴展從官方網站Knockout.js，here。不幸的是，我的代碼不工作。爲什麼？對於我的生活，我無法弄清楚爲什麼這不起作用。

來源

2013-10-20 user2871401

看來您的newValue沒有值。 Console.log它確保雖然。您還需要註冊您的擴展器，然後再嘗試使用它 –

如果您創建了一個jsFiddle，我可以告訴您我的意思是應該花10秒時間解決問題。 –

在文檔中沒有聲明它，但是您需要在第一次使用它之前創建擴展程序。

所以你的情況的ko.extenders.required調用應該去前new searchViewModel()電話：

ko.extenders.required = function(target, msg) { 
    //... 
} 


ko.applyBindings(new searchViewModel());

而且，由於您使用的是required擴展，無需手動檢查的css的query，因爲它結合爲您提供一個hasError觀察：

<input data-bind="value:query, css: { required: query.hasError }" />

你也可以我們E本hasError在search函數來顯示警報：

this.search = function() { 
    if (this.query.hasError()){ 
     alert('Please enter a query.'); 
    } 
    else { 
     alert('Searching for ' + this.query()); 
    } 
}

演示JSFiddle。

順便說一句，你的原始CSS綁定不工作（在錯誤的條件旁），因爲你需要編寫query()獲得ko.observable值，如果它在表達式中使用。

所以下面也將工作：

<input data-bind="value:query, 
        css: { required: (query() != null && query().length == 0) }"/>

演示JSFiddle。

來源

2013-10-20 14:03:48 nemesv

要求在淘汰賽中的價值

回答

相關問題