如何在加载 JSON 之前在 Knockout.js 中隐藏 div？

Question

我正在使用 Knockout.js 并尝试在 JSON 加载时隐藏和显示页面的各个部分。loader.gif 应该在没有数据时显示，模板应该在数据存在后显示。这是 HTML：

<section class="container">
    <div class="loader" data-bind="visible: $data === undefined">
        <img src="/static/images/loader.gif" alt="Loading">
    </div>
    <div id="mainArea" data-bind="visible: $data !== undefined">
        [The main template is here.
            It should only show after the JSON has loaded]
    </div>
    ...

loader.gif 部分按预期显示和隐藏，但模板在加载过程中不会隐藏。我添加display: none到 CSS 文件中，以便在应用绑定并加载数据之前它不会显示，但是当我这样做时，它#mainArea从不显示。

我也试过使用data-bind="visible: myObservableArray().length > 0"，但这也不起作用。

有任何想法吗？

Answer 1

在您的视图模型中放置一个可观察的属性，例如dataLoaded. 像false在您的视图模型中一样初始化它。然后在 AJAX 回调中，将其设置为true. 在您的visible-binding 中使用它：

<div class="loader" data-bind="visible: !dataLoaded">
    <img src="/static/images/loader.gif" alt="Loading">
</div>
<div id="mainArea" data-bind="visible: dataLoaded">
    <!--The main template is here.
        It should only show after the JSON has loaded-->
</div>

请记住再次将其设置回falseAJAX 调用开始时。

简单的例子：

var self = this;
/* ... */
self.dataLoaded = ko.observable(false);
/* ... */
function successCallback(result) {
    /* do whatever you need with your AJAX result */
    self.dataLoaded(true);
}
/* ... */
self.getTheData = function(optionalParams) {
    /* ... */
    self.dataLoaded(false);
    $.getJSON(someUrl, successCallback);
}

使用 setTimeout 来伪造 ajax 调用的异步性的工作示例：

http://jsbin.com/zizidofidu/edit?html,js,output

请注意，可见绑定仅display: none;在绑定条件解析为时删除内联样式true，因此您不能将其放入非内联 CSS，否则绑定无法使其可见。