January 29, 2014, 10:50 am by Rhyous
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script type="text/javascript" >
$(function(){
// custom binding handler so pressing enter in a textbox is the same
// as clicking the button.
ko.bindingHandlers.enterKey = {
init: function(element, valueAccessor, allBindings, vm) {
ko.utils.registerEventHandler(element, "keyup", function(event) {
if (event.keyCode === 13) {
ko.utils.triggerEvent(element, "change");
valueAccessor().call(vm, vm);
}
return true;
});
}
};
var fakeSearch = function(args, callback) {
var data = args;
callback(data);
return args;
};
var ButtonViewModel = function(text, searchMethod, canSearchMethod) {
var _self = this;
_self._canSearchMethod = canSearchMethod;
_self.text = ko.observable(text);
_self.onClick = searchMethod;
_self.canClick = ko.computed(_self._canSearchMethod);
};
var SearchParametersViewModel = {
'SearchTerm': ko.observable(''),
'SearchOption': ko.observable(''), // Not used in example
'StartDate': ko.observable(''), // Not used in example
'EndDate': ko.observable('') // Not used in example
};
var SearchViewModel = function(searchMethod, searchArgs) {
// private properties
var _self = this;
_self._searchMethod = searchMethod;
_self._searchArgs = searchArgs;
_self._canSearch = function() {
return _self.searchParameters.SearchTerm() != null && _self.searchParameters.SearchTerm() != '';
};
// public properties
_self.searchParameters = SearchParametersViewModel;
_self.results = ko.observable('');
_self.searchCallBack = function (data) {
_self.results(JSON.stringify(data));
};
_self.searchButton = new ButtonViewModel("Search",
function () {
_self._searchMethod(_self._searchArgs, _self.searchCallBack);
}, _self._canSearch);
};
ko.applyBindings(new SearchViewModel(fakeSearch, {a: "1", b: "2"}));
});
</script>
</head>
<body>
<input data-bind="value: searchParameters.SearchTerm, valueUpdate: 'afterkeydown', enterKey: searchButton.onClick" />
<button type="button" id="btnSearch" data-bind="text: searchButton.text, enable: searchButton.canClick, click: searchButton.onClick"></button>
<p data-bind="text: results"></p>
</body>
</html>
Like this:
Like Loading...
Related
