如何使用 devexpress 和 knockout.js 创建提交按钮？

Question

所以我有一个应用程序可以显示一个人的开支。我创建了添加新费用的视图，但我不知道如何制作保存按钮，以便将费用保存在数据库中并重定向到费用列表。

视图有很多这样的字段：

    <div id="selBxChSt" data-bind="dxLookup: {
        dataSource: dsExpenses,
        valueExpr: 'NAME',
        displayExpr: 'NAME',
        title: 'Expense',
        searchEnabled: true,
        value: selectedExpense
        }">
    </div>

不仅是 dxLookup，还有 dxTagBox、dxDateBox 和 dxTextArea。

我制作了重置按钮，将所有字段设置为默认值。但我不知道如何将它们保存到 firebird db。

这是按钮的html：

<div class="Column" data-bind="dxButton: {icon: 'todo', text: 'Save', type: 'normal', onClick: expenseSave}"></div>

所以现在我必须在 knockoutJS 中创建一个函数来保存用户从查找中选择的所有内容。

我不知道该怎么做，我是 knockout.js 和 devexpress 的新手，所以任何想法或提示都会很棒，谢谢！

Answer 1

要实现将数据提交到服务器端的“老式”表单，请采用以下方式：

1. 用form标签包裹所有编辑和提交按钮。
2. 为 dxButton 使用 useSubmitBehavior 选项。
3. 为编辑者设置name 选项。

您的代码应如下所示：

<form action="your-action" method="post" data-bind="event: { submit: onFormSubmit }">
    <div data-bind="dxTextBox: { name: 'login' }"></div>
    <!-- other editors... -->
    <div data-bind="dxButton: { text: 'Submit', useSubmitBehavior: true }"></div>
</form>

查看模型：

viewModel.onFormSubmit = function() {
    // Here you can implement a custom logic before submit. Validate editors, for instance.
};

也请参考此sample。