привязка стиля не работает

Question

Есть ли у вас какие-либо идеи, почему следующий код не работает? У меня есть два вызова ajax для получения данных из Server i wan для отображения в моем основном файле. Я хочу, чтобы пользовательский интерфейс связывался со значениями, которые я получаю от вызовов. Данные, которые я верну, верны, но цвет всегда желтый и красный, как если бы сигналы тревоги и предупреждения были бы правдивыми, даже если они являются ложными. Также 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

Просто не хватает какой-то () разворачивать (прочитать) ваши наблюдаемые свойства в вашей, если/еще логика:

Вместо от:

databadge: warnings ? warningCount : false 

использование:

databadge: warnings() ? warningCount() : false 

Если вы используете наблюдаемые значения сами по себе в связывающем (data-bind="{text: someObservable}"), затем нокаута молча разворачивает значение someObservable для вас. Вы можете использовать data-bind="{text: someObservable()}", но вам не обязательно.

Однако, если вы используете вычисленное выражение, то нокаут больше не может этого сделать для вас, и вам нужно самостоятельно развернуть все значения: data-bind="{text: someObservable() + '!'}".