淘汰赛和 viewModel 的问题答案

【问题标题】：Problems with Knockout and viewModel淘汰赛和 viewModel 的问题
【发布时间】：2016-08-17 17:19:20
【问题描述】：

我的观点如下：

<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>

这在我的 js 文件中：

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

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

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

return viewModel;

但是现在，当我关注文本框时，我会收到警报“clearSearch”，然后单击按钮，我会收到 404 错误。

有人有想法吗？

谢谢帕特里克

【问题讨论】：

A) 您的代码 sn-p 不会产生任何结果。 B）如果您在类似的功能上收到 404 错误，则可能意味着正在提交表单。我不熟悉您正在使用的控件，但我的猜测是，如果您检查您的 html，您会在其中的某处看到一个表单，并且 dxButton 可能会创建一个导致表单触发的提交按钮。如果您可以修改 ko.customBindings，请这样做以将按钮更改为非提交按钮。否则，将 event.preventDefault 和 event.stopPropagation 添加到 doWork 方法，假设 event 是您可以在参数中访问的内容。

标签： knockout.js devextreme

【解决方案1】：

据此article：

定义小部件时，指定一个 URL（字符串或对象）作为小部件事件的处理程序（将 URL 分配给相应的选项或将其作为参数传递给 on 方法）。要获得更好的 UI 设计，请使用由于单击小部件或小部件元素而触发的事件导航到视图。

因此，此事件处理程序onClick: 'SearchCustomer' 将您导航到未定义的“SearchCustomer”视图。

如果您想使用viewModel.SearchCustomer 方法作为onClick 事件处理程序，只需从绑定字符串中删除引号：

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

也可以查看fiddle。

【讨论】：

就是这样！谢谢！