Question

我的页面部分绑定到Knockout Viewmodel。当我点击链接时，它会加载一些数据并将其显示得更远一点。我想在它出去时显示一点加载img并加载数据然后在它完成时隐藏它。我有以下代码（剥离以显示重要部分）。 Ajax调用是 NOT 异步，对于其他人正在使用的其他代码，它被设置为false，因此我无法更改它。问题是＆＃34; self.Loading（false）＆＃34;在ajax调用完成之前不会被解雇，所以它似乎根本没有显示出来。如果我将ajax调用切换为异步，它按预期工作。所以我想知道为什么Ajax调用阻止了observables更改，因为它在它之前被调用，不应该立即触发它。有没有办法迫使它立即触发。

HTML：

<a data-bind="click: GetInfo" href="javascript:;">
     <img data-bind="visible: Loading" src="myimg.jpg" alt="Loading" />
</a>

KO：

 self.Loading = ko.observable(false);
 self.GetInfo = function () {
    self.Loading(true);
    AjaxCall().done(function (data){
       self.Loading(false);
    }
 };

Answer 1

observable和DOM可能会立即更新，但您无法看到它，因为浏览器可能无法绕过绘制屏幕。该请求阻止了重绘，因为......它是非异步的。这是您不发出非异步请求的确切原因。

作为一种解决方法，您可以尝试强制事件循环旋转一次，使用setTimeout和0超时来在可观察到的更改后运行您可怕的同步请求，但是严肃地说，只需修复您的请求即可异步。当代码阻塞时，浏览器不保证会做任何事情（包括运行任何加载动画）。

Answer 2

试试这个

<a data-bind="click: GetInfo,valueUpdate: 'keyup'" href="javascript:;">
    <img data-bind="visible: Loading" src="myimg.jpg" alt="Loading" />
</a>

使Knockout可观察立即申请？

2 个答案: