javascript - 手动订阅调用updateFromJS导致死锁

Question

我在下面有一些代码，以确保用户不需要单击任何按钮并将所有输入更新到服务器端。服务器端代码负责执行任何计算并将更新的 JSON 发送回客户端。

这里的问题是手动订阅代码将检测用户输入的更改，它将调用一个函数将 JSON 数据发布到服务器并从服务器接收 JSON。从此时起，它将尝试通过调用 ko.mapping.updateFromJS(viewModel, data); 来更新 View 模型，但这里发生了死锁。 updateFromJS会再次触发手动订阅事件，从而再次调用服务器代码，从而触发另一轮手动订阅。

var initialData = /* get JSON from server side */;

var viewModel = ko.mapping.fromJS(initialData);

ko.applyBindings(viewModel, document.body);

viewModel.Product.Parameter1.subscribe(function(newValue) {
    postToServer();
});

viewModel.Product.Parameter2.subscribe(function(newValue) {
    postToServer();
});

viewModel.Product.Parameter3.subscribe(function(newValue) {
    postToServer();
});

function getProduct() {
    // retrieve JSON data to be posted to server side
}

function postToServer() {
    var product = getProduct();

    $.ajax({
        url: '/Home/ProductUpdate/',
        data: JSON.stringify(product),
        type: "POST",
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            // update JSON returned from server side to observable view-model
            ko.mapping.updateFromJS(viewModel, data);
        }
    });
}

是否可以执行以下任一操作:

• 在调用 ko.mapping.updateFromJS 时禁用手动订阅？ (之后继续)。
• 手动订阅是否会忽略 ko.mapping.updateFromJS 调用触发的事件？

Answer 1

你能用这样的变量来做到这一点吗:

<script language="javascript" type="text/javascript">
var initialData = /* get JSON from server side */;

var viewModel = ko.mapping.fromJS(initialData);

var preventUpdate = false;

ko.applyBindings(viewModel, document.body);

viewModel.Product.Parameter1.subscribe(function(newValue) {
    if (!preventUpdate) postToServer();
});

然后在 postToServer 函数中

success: function (data) {
    // update JSON returned from server side to observable view-model

    preventUpdate = true;
    ko.mapping.updateFromJS(data, viewModel);
    preventUpdate = false;
}