javascript - Knockout JS 并在 textInput 更改时执行 $.ajax

Question

我有一个根据从数据库检索的数据动态生成的表，因此来自数据库的对象列表如下所示:

public string Account { get; set; }
public string Description { get; set; }
public decimal A2Year { get; set; }
public decimal A1Year { get; set; }
public decimal B1Year { get; set; }
public decimal Current { get; set; }
public decimal Proposed { get; set; }
public IEnumerable<CustomerInfo> UserSalaries { get; set; }

我使用 $.ajax get 函数检索此数据，因为它是一个列表，所以我通过以下方式生成表:

<tbody data-bind="foreach: accountData">
    <tr class="dept-row" role="row">
        <td><span data-bind="text: Description"></span></td>
        <td><span data-bind="text: Account"></span></td>
        <td class="center-text"><a data-bind="click: function(){ $parent.showNoteDialog(Account)}"></a></td>
        <td class="align-right"><span data-bind="text: A2Year"></span></td>
        <td class="align-right"><span data-bind="text: B1Year"></span></td>
        <td class="align-right"><span data-bind="text: A1Year"></span></td>
        <td class="align-right"><span data-bind="text: Current"></span></td>
        <td><input class="align-right dollar-amount" data-bind="textInput: Proposed" /></td>
    </tr>
</tbody>

表格已正确生成，在我的 View 模型中我只有以下行:

self.accountData = ko.observableArray();

我想要完成的任务(并且我对 KnockoutJS 很陌生)是当“建议”输入值更改时，我想调用 $.ajax 函数将此值保存到数据库中。我已阅读并尝试绑定(bind)“hasFocus”，以便我可以在离开字段时调用 ajax，但如果添加 hasFocus 绑定(bind)，则无法生成表，因为所有输入字段都具有完全相同的绑定(bind)。有什么建议如何实现这一目标？建议的值应该在其自己的可观察数组中还是跟踪整个对象列表就足够了？最终的问题是如何在数据更改时调用ajax函数来保存数据。

Answer 1

如果我理解正确的话，您有以下要求:

1. 您希望在 Propose 的值更改时调用 ajax 函数。
2. 您希望在值更改时并且仅在 Proposed 的输入字段失去焦点时调用 ajax 函数。

正确吗？

在这种情况下，您需要进行以下更改:

1. 将 Propose 的数据绑定(bind)从“textInput”更改为“value”，如 data-bind="value: Profused" 所示。
2. 仅当 Propose 本身是一个可观察对象时，绑定(bind)才会起作用。事实上，您的所有值都需要是可观察的如果它们将会发生变化，并且您需要在 UI 中动态反射(reflect)这些变化。您可以在 observables 数组中使用 observables。
3. 要在 Propose 的值发生变化时调用 ajax 函数，您需要“订阅”它，以便可以监听其变化。

基本方法 - 使用订阅功能:

self.Proposed.subscribe(function(newValue){
    //call ajax
});

更高级、更结构化的方式 - 使用extenders .