Problems with Knockout and viewModel

Question

I´ve got the following in my view:

<div data-bind="dxTextBox: { onFocusIn: onEnterSearch, placeholder: 'suche...', showClearButton: true , value: ''}"></div>
<div data-bind="dxButton: { onClick: 'SearchCustomer', text: 'suchen' }"  style="width:100%;"></div></div>

and this in my js file:

function DoSearch() { alert('DoSearch');}

function clearSearch() {                
        alert('clearSearch');
}

var viewModel = {
    ////  Put the binding properties here
    SearchCustomer: DoSearch,
    onEnterSearch: clearSearch
};

return viewModel;

But now, when I focus the textbox, I get the alert 'clearSearch', and onclick on the button, I get a 404 error.

Does anybody have an idea?

Thanks Patrick

Answer 1

According this article:

When defining a widget, specify a URL (a string or an object) as a handler for a widget event (assign the URL to the corresponding option or pass it as a parameter to the on method). For a better UI design, navigate to views using the events that fire as a result of clicking a widget or a widget element.

So, this event handler onClick: 'SearchCustomer' navigates you to the 'SearchCustomer' view that isn't defined.

If you want to use the viewModel.SearchCustomer method as the onClick event handler, just remove the quote symbol from the binding string:

<div data-bind="dxButton: { onClick: SearchCustomer, text: 'suchen' }"></div>

See this fiddle, as well.