javascript - 样式绑定(bind)不起作用

Question

您知道为什么以下代码不起作用吗？我有两个 ajax 调用来从我想要显示在我的主文件中的服务器获取数据。我希望 UI 绑定(bind)到我从调用中获得的值。我得到的数据是正确的，但颜色总是黄色和红色，就好像警报和警告是真的，即使它们是假的。此外，attr-Binding 永远不会将 databadge 属性设置为 false，但如果 alarmCount 或 messageCount > 0，它会显示正确的值。

这是我的 HTML:

 <%-- header large --%>
<header id="header_large_container" class="hide-for-medium-down large-10">
    <div class="row main_header text-right" id="header_large">
        <i class="fi-alert size-21 badge1" data-bind="attr: { databadge: warnings ? warningCount : false }, style: { color: warnings ? 'yellow' : 'white' }"></i>
        <i class="fi-x-circle size-21 badge1" data-bind="attr: { databadge: alarms ? alarmCount : false }, style: { color: alarms ? 'red' : 'white'}"></i>
</div>
</header>

 <%-- header small, medium --%>
<header id="header_small_container" class="hide-for-large-up fixed">
<div class="row main_header">
    <div class="columns small-2">
      <a class="left-off-canvas-toggle" href="#"><i class="fi-list"></i></a>
    </div>
    <div class="small-6 columns" style="padding-top: 15px">
              </div>
        <i class="fi-alert size-21 badge1" data-bind="attr: { databadge: warnings ? warningCount : false }, style: { color: warnings ? 'yellow' : 'white'}"></i>
        <i class="fi-x-circle size-21 badge1" data-bind="attr: { databadge: alarms ? alarmCount : false }, style: { color: alarms ? 'red' : 'white'}"></i>

</div>
</header>

我的 JavaScript:

var myViewModel = {
            alarmCount: ko.observable(0),
            alarms: ko.observable(false),
            warningCount: ko.observable(0),
            warnings: ko.observable(false),
        };

$(document).ready(function () {
$(document).foundation();

            ko.applyBindings(myViewModel, document.getElementById('header_large_container'));
            ko.applyBindings(myViewModel, document.getElementById('header_small_container'));

        })

 $.ajax({
            async: false,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            url: "Default.aspx/GetAlarmCount",
            data: {},
            success: function (data) {
                myViewModel.alarmCount(data.d);
                if (data.d > 0) {
                    myViewModel.alarms(true);
                }
                else {
                    myViewModel.alarms(false);
                }
                return false;
            },
            error: function (xhr, statusText, error) {
                alert("Error on Default.aspx/GetAlarms: " + xhr.responseText);
                return false;
            }
        });

        $.ajax({
            async: false,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            url: "Default.aspx/GetWarningCount",
            data: {},
            success: function (data) {
                myViewModel.warningCount(data.d);
                if (data.d > 0) {
                    myViewModel.warnings(true);
                }
                else {
                    myViewModel.warnings(false);
                }
                return false;
            },
            error: function (xhr, statusText, error) {
                alert("Error on Default.aspx/GetAlarms: " + xhr.responseText);
                return false;
            }
        });

Answer 1

只是缺少一些 () 来解包(读取)您在 if/else 逻辑中的可观察属性:

代替:

databadge: warnings ? warningCount : false

使用:

databadge: warnings() ? warningCount() : false

如果您在绑定(bind) (data-bind="{text: someObservable}") 中单独使用可观察值，则 knockout 会默默地解包 someObservable 的值你。您可以使用 data-bind="{text: someObservable()}"，但您不必这样做。

但是，如果您使用计算表达式，则 knockout 不能再为您执行此操作，您必须自己解包所有值:data-bind="{text: someObservable() + '!'}".