0

我有一个非常简单的代码。我正在使用 texttext 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 会按预期更新。但如果它被删除，用户界面不会更新。

4

2 回答 2

1

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

就像你说的，如果你alert从原来的小提琴中取出 DOM，那么 DOM 就没有正确更新。您看不到“添加”文本 - 只有绑定处理程序内的代码完成执行后的“错误”文本。但是，如果你在等式中引入承诺，那么你就可以确保一切都以正确的顺序发生。我在这里使用了 Q.js，因为这是我习惯的，但是还有其他库可以使用（或者只使用jQuery 的 $defered）

这是更新的小提琴。我在您的 KO 模型中添加了一个方法，该方法在您的模型中的 observables 上enable设置true/值。false这是更新的文本部分

$('#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
        });

    });

});
于 2014-06-04T23:19:31.660 回答
1

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

如果您更改以下内容会怎样：

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/

于 2014-06-05T06:28:25.407 回答