样式绑定不起作用

你知道为什么下面的代码不起作用吗？我有两个ajax调用来从服务器获取数据，以便显示在我的主文件中。我希望UI绑定到我从调用中获得的值。我得到的数据是正确的，但颜色总是黄色和红色，就好像警报和警告是真的，即使它们是假的。此外，attrBinding从未将database属性设置为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;
            }
        });