Jquery mobile 延迟敲除绑定评估

在这里击倒新手。我有一个页面显示客户信息

1st div should be displayed when customer info is present.
2nd div should be displayed when no customers are displayed

//1st Div
<div id="custInfoList" data-role="content"
    data-bind="foreach: customers, visible : customers().length > 0">
    <p data-bind="text: $data.info"></p>
</div>
//2nd Div
<div id="empty" data-role="content"
    data-bind="visible: customers().length === 0 ">
    <p>No Customer Information</p>
</div>

..在页面加载中，我添加了以下逻辑：

//On Page Load, call AJAX to populate the customers
    //customers = {jsonData}

我的页面正在使用jQuery Mobile。我唯一的问题是当第一次显示页面时，会显示第二个div。当Ajax json数据返回时，它就隐藏在那里

当ajax仍在加载且数据尚未返回时，是否可以隐藏第二个div

更新2

另一方面，我尝试了刚刚从网上读到的KO HTML模板

<!-- ko if: customers().length -->
    <div id="custInfoList" data-role="content"
        data-bind="foreach: customers, visible : customers().length > 0">
        <p data-bind="text: $data.info"></p>
    </div>
<!-- /ko -->
<div id="empty" data-role="content"
    data-bind="if: customers().length === 0">
    <p>No Customer Information</p>
</div>

没有客户信息

但仍然不成功。你有什么想法吗

更新3 我试着更新@shriek在他的小提琴中展示的内容

没有客户信息

居住于

我的JS：

$.support.cors = true;
var test = {
    customers: ko.observableArray(),
    popCustomers: function () {
        for (var i = 0; i < 3; i++) {
            this.customers.push(i);
        }
    },
    popByAjax: function () {
        console.log("Calling JSON...");
        $.getJSON("http://api.openweathermap.org/data/2.5/weather?id=2172797", function (data) {
            console.log(data);
            if (data.sys) {
                this.customers.push(data.sys.country);
                console.log("Loaded");
            }
        }.bind(this));
    }
};
test.popByAjax();
ko.applyBindings(Object.create(test));

$.support.cors=true；
var测试={
客户：ko.observearray（），
popCustomers:函数（）{
对于（变量i=0；i<3；i++）{
本.客户.推送（一）；
}
},
popByAjax:function（）{
log（“调用JSON…”）；
$.getJSON（“http://api.openweathermap.org/data/2.5/weather?id=2172797，函数（数据）{
控制台日志（数据）；
if（data.sys）{
this.customers.push（data.sys.country）；
控制台日志（“已加载”）；
}
}.约束（这个）；
}
};
test.popByAjax（）；
applyBindings（Object.create（test））；

---

初始加载时，将显示“AU”。现在将weather？id=2172797更改为weather？id=21727971，使其无效。我注意到没有显示客户信息

您可以看到第二个div和第一个div，因为尚未对DOM元素执行敲除

applyBinding

，这意味着尚未计算

可见的
绑定，因此不会相应地隐藏任何元素，使其处于默认状态（将显示）

为了克服这种行为，您只需要向那些您希望默认隐藏它们的元素添加一个
style=“display:none；”“
，然后
visible
绑定将删除
display:none
，如果它的计算结果为
true

所以你的代码应该是这样的

//1st Div
<div id="custInfoList" data-role="content"
    data-bind="foreach: customers, visible : customers().length > 0">
    <p data-bind="text: $data.info"></p>
</div>
//2nd Div
<div id="empty" data-role="content"
    data-bind="visible: customers().length === 0" style="display: none;">
    <p>No Customer Information</p>
</div>

//1st Div

//第二组
没有客户信息


顺便说一句，无论您使用的是
visible
还是
if
绑定，都没有关系，因为问题不在于绑定本身。
我猜您在
//customers={jsonData}
中做得不对

要更新ko.observable，您需要使用
customers（jsonData）
，而不是
customers=jsonData

ko.observable（）返回一个函数，setter是
customers（newValue）
，getter是
customers（）
，您需要在setter和getter中显式使用函数调用。
如上面的注释所述，对于更新3
display:none
是无关的，因为它已经由数据绑定上的
if
处理

第二件事是，
observearray
在收到错误响应后必须清空，因为隐藏/显示是基于该
observearray
长度的比较

要处理的代码：-
将
style=“display:none”
添加到第二个div。然后当AJAX调用返回时，
$（'#empty'）.show（）
嗨，詹姆斯，谢谢，这是我在Jquery中经常做的事情。我在想，如果Knockout js提供了“可见”绑定，那么我认为它正在被评估。否则，我可以删除“visible”并依赖Jquery DOM操作。问题是，在返回客户之前，长度为零，因此绑定显式显示div。我认为您尝试执行的操作超出了敲除的范围，因此我将使用Jquery来执行。是的，完全正确。这和我的想法是一样的。我只是问有没有办法。我试着使用敲除模板，但我似乎无法使其工作。好的..我现在明白了。首先也是最重要的，您不需要
样式：如果您正在执行
if
from
ko
ko
自动为您执行
if
，则无需。另一件你必须记住的事情是，如果你没有得到任何回复，你应该清空你的
observearray
。请记住，您正在检查该
observableerary
是否为空。这里有一些修改，你可以继续问任何关于代码的问题。
$.support.cors = true;
var test = {
    customers: ko.observableArray(),
    popCustomers: function () {
        for (var i = 0; i < 3; i++) {
            this.customers.push(i);
        }
    },
    popByAjax: function () {
        console.log("Calling JSON...");
        $.getJSON("http://api.openweathermap.org/data/2.5/weather?id=2172797", function (data) {
            console.log(data);
            if (data.sys) {
                this.customers.push(data.sys.country);
                console.log("Loaded");
            }
        }.bind(this));
    }
};
test.popByAjax();
ko.applyBindings(Object.create(test));

//1st Div
<div id="custInfoList" data-role="content"
    data-bind="foreach: customers, visible : customers().length > 0">
    <p data-bind="text: $data.info"></p>
</div>
//2nd Div
<div id="empty" data-role="content"
    data-bind="visible: customers().length === 0" style="display: none;">
    <p>No Customer Information</p>
</div>