knockoutjs div binding не работает

Question

Я пытаюсь связать некоторые динамические значения с div, но по какой-то причине div не извлекает данные должным образом.

Это то, что у меня есть:

HTML:

  <div class="section-content tabcontent sc7" id="gridEventLimits" style="padding: 0; background-color: #fff; display: none"> 
       <div style="clear: both"> 
       </div> 
       <table> 
        <tr> 
         <td></td> 
         <td></td> 
         <td colspan="4"></td> 
        </tr> 
        <tr> 

         <table class="sgrid" data-bind="visible: skills && skills.length > 0" 
          style="width: 100%; border-collapse: collapse; border: solid 1px #aaa"> 
          <thead> 
           <tr style="background: rgb(242, 242, 225); color: #333"> 
            <td>Event Skills 
            </td> 
           </tr> 
          </thead> 
          <tbody data-bind="foreach: skills"> 
           <tr> 
            <td> 
             <ul class="collapsible" data-bind="attr: { id: 'collapsible' + Id }"> 
              <li><span data-bind="text: Name" style="color: #365474"></span> 

              </li> 
             </ul> 
            </td> 
           </tr> 
          </tbody> 
         </table> 
         <p data-bind="visible: !skills || skills.length == 0" style="text-align: center"> 
          -- No People Found -- 
         </p> 

        </tr> 
       </table> 
      </div> 

Тогда у меня есть JS функцию, которая вызывается по событию загрузки страницы:

var skillPeopleList; 
function ApplyKOBindingsToSkillPeopleDetails() { 
    if (eventId > 0) { 
     var element = $('#gridEventLimits')[0]; 
     skillPeopleList = new SkillPeopleListModel(eventId); 
     ko.applyBindings(skillPeopleList, element); 
    } 
} 

function SkillPeopleListModel(id) { 
    var self = this; 
    self.Id = id; 
    self.skills = ko.observableArray([]); 

    //initialize 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "/webservices/EventScheduleService.asmx/GetEventSkills", 
     data: "{'eventId':" + self.Id + "}", 
     dataType: "json", 
     async: true, 
     success: function (data) { 
      result = data.d; 

      if (result) { 
       //if (result.skills) { 
       // result.skills.forEach(function (entry) { 
        result.forEach(function (entry) { 
         self.skills.push(entry); 
        }); 
       //} 
      } 
     }, 
     error: function (data, status, error) { 
     } 
    }); 
} 

Содержание ответа веб-службы (объект результатов):

Любая идея, что я делаю неправильно? Я новичок в knockoutjs, и я все еще изучаю структуру.

Спасибо заранее, Лацьале

Answer 1

Изменение привязки к

skills && skills().length > 0 

И

!skills() || skills().length == 0 

Будет ли это исправить. Навыки - это наблюдаемый массив, поэтому skill.length вызовет ошибку и сломает другие привязки. Исправьте наблюдаемую и затем проверяющую длину.

В качестве побочного примечания такая логика будет лучше размещена внутри модели вида, поэтому вы можете сохранить модельный вид и модель просмотра отдельно.