Question

您有任何想法，为什么以下代码不起作用？我有两个ajax调用从服务器获取数据我想显示在我的主文件中。我希望UI绑定到我从调用中获得的值。我得到的数据是正确的，但颜色总是黄色和红色，好像警报和警告都是真的，即使它们是假的。此外，attr-Binding从不将databadge属性设置为false，但如果alarmCount或messageCount为＆gt; 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逻辑中只缺少一些()来解包（读取）你的observable属性：

而不是：

databadge: warnings ? warningCount : false

使用：

databadge: warnings() ? warningCount() : false

如果您在绑定中使用可观察值（data-bind="{text: someObservable}"），则敲门会默默地为您展开someObservable的值。您可以使用data-bind="{text: someObservable()}"，但不必这样做。

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

样式绑定不起作用

1 个答案: