Question

我有一个非常简单的代码。我正在使用textext jQuery插件。

    $('#'+field).textext({ plugins: 'tags' }).bind('isTagAllowed', function(e, data){
    window.kmodel.enableButtons(false);
    window.kmodel.showError(false); 
    //make AJAX calls while stuff is disabled
    //re-enable

}

问题是UI在处理程序退出之后才会更新，此时已经太晚了。

我想我可以使用jQuery本身，但我发现淘汰赛更加优雅，我真的想深究这一点。也许淘汰赛有像pushChanges这样的功能吗？

http://jsfiddle.net/Ku2cj/1/

所以这就是事情。如果您保留警报，则UI会按预期更新。但如果删除它，UI就不会更新。

Answer 1

我相信我有一个适用于你的版本正在使用promises。我对texttext jQuery插件一无所知，或者在DOM操作方面如何与KO进行交互。话虽这么说，我有所作为，但它可能不是你想要的解决方案。

就像你说的那样，如果你从原来的小提琴中取出alert，那么DOM就没有正确更新。你没有看到＆＃34;添加＆＃34;文字 - 只有＆＃34;错误＆＃34;绑定处理程序内的代码完成执行后的文本。但是如果你将承诺引入等式中，那么你就确保一切都按照正确的顺序发生。我在这里使用了Q.js，因为这是我以前所使用的，但还有其他库可供使用（或只使用jQuery's $deffered）

这是updated fiddle。我在您的KO模型中添加了一个名为enable的方法，该方法在模型中的observable上设置true / false值。这是更新的textext部分

$('#textarea').textext({
    plugins: 'tags'
}).bind('isTagAllowed', function (e, data) {
    window.komodel.enable(false) // happens first
   .then(function () {
        $.ajax({  // only after first happens, ajax starts
            url: "/Ku2cj",
            async: false,
            timeout: 2000
        }).success(function () {
            window.komodel.enable(true); // after ajax is complete, this happens
        });

    });

});

Answer 2

可能是因为浏览器仍在执行代码，并且由于您将async设置为false，因此它会执行所有代码同步，因此没有时间更新UI。< / p>

如果更改以下内容该怎么办：

window.komodel.enableButtons(false);
window.komodel.showError(false);
window.komodel.showAdding(true);

  $.ajax({
      url: "/Ku2cj",
      async: false,
      timeout: 2000
  });

window.komodel.enableButtons(true);
window.komodel.showAdding(false);
window.komodel.showError(true);

使用异步构造：

window.komodel.enableButtons(false);
window.komodel.showError(false);
window.komodel.showAdding(true);

$.ajax({
    url: "/Ku2cj",
    timeout: 2000
}).then(function() {
    window.komodel.enableButtons(true);
    window.komodel.showAdding(false);
    window.komodel.showError(true);
});

http://jsfiddle.net/kVLaK/

Knockout observables未在事件处理程序中更新

2 个答案: