javascript - knockoutjs div binding not working -

javascript - knockoutjs div binding not working -

i'm trying bind dynamic values div reason div doesn't fetch info properly.

this have:

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>

then have js function called on page load event:

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) { } }); }

the content of web service response (result object) one:

any thought doing wrong? i'm new knockoutjs , i'm still learning framework.

thanks in advance, laziale

changing bindings to

skills && skills().length > 0

and

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

will prepare it. skills observablearray, skills.length cause error , break other bindings. unwrapping observable , checking length prepare it.

as side note, kind of logic improve placed within view-model, can maintain model-view , view-model separate.

javascript jquery html knockout.js knockout-2.0