javascript - Knockout.js "visible"调用异步函数 - 不工作

Question

我一直在尝试理解 async、promises 等，我认为我对它有基本的了解，但我没有得到我期望的结果。

我有一个 HTML 表格，包含以下内容:

<table data-bind="visible: viewPrincipal()">

viewPrincipal() 是一个应该返回 true 或 false 的函数。如果 viewPrincipal() 仅由 return false 或 return true 组成，这在最基本的级别上确实有效。但我想要做的是调用异步函数以从那里获取 true 或 false 值。

function viewPrincipal() {
  console.log("Seeing if person is in principal group");
  return IsCurrentUserMemberOfGroup("Principal Members", function (isCurrentUserInGroup) {
    console.log(isCurrentUserInGroup);
    return isCurrentUserInGroup;
  });
}

console.log 有效，并如我所料返回 true 或 false。但我希望父 viewPrincipal() 函数返回真值或假值，而我得到的只是“未定义”。

我理解为什么会发生这种情况 - IsCurrentUserMemberOfGroup() 函数需要一些时间才能完成 - 但我不知道如何修复它。我知道如何将函数链接在一起，但是当我尝试使用 knockout.js 之类的东西来确定表是否应该可见时，我不知道如何链接。

谁能帮忙？

Answer 1

最好的方法是使用一个可观察的 bool 值，让你的异步函数改变它的值。让双向绑定(bind)的魔力完成剩下的工作。

示例:JSFIDDLE

function vm() {
    this.viewPrincipal = ko.observable(false);
};

var vm = new vm();
ko.applyBindings(vm);

function fakeAsync() {
    setTimeout(() => {
        vm.viewPrincipal(true);
    }, 1500);
}
fakeAsync();