javascript - Knockout foreach binding not rendering anything -
i have, thought straightforward knockout situation. have model comes in webapi has array of things success element. need value of success determine of properties render. i've validated data coming down webapi ok nothing table shell renders. there no errors in dev console.
the html
<div id="model1wrapper"> <table class = "table"> <thead > <tr > <th >stuff</th><th>things</th> </tr> </thead> <tbody data-bind = "foreach: $data.historyarray" > <!--ko if: success --> <tr class = "success" > <td data-bind = "text: $data.thinga" > </td> <td data-bind = "text: thingb" > </td> </tr> <!-- /ko --> <!--ko ifnot: success --> <tr class = "danger" > <td colspan="3" data-bind = "text: thingc" > </td> </tr> <!-- /ko --> </tbody> </table> </div> example model data
[{ "thinga": "a", "thingb": "b", "thingc": "c", "success": false }, { "thinga": "a", "thingb": "b", "thingc": "c", "success": true }] this monitoring process has feeds several endpoints have multiple viewmodels on page. framed rough example of how working elsewhere on page.
that business
<script> var samplemodeldata = [{ "thinga": "a", "thingb": "b", "thingc": "c", "success": false }, { "thinga": "a", "thingb": "b", "thingc": "c", "success": true }] var viewmodel1 = { historyarray: ko.observablearray() }; function onnewhistory(data) { viewmodel1.historyarray(data); } $(document).ready(function(){ ko.applybindings(viewmodel1, document.getelementbyid("model1wrapper")); onnewhistory(samplemodeldata); }) </script> i had mask of of speciffics gist is, ajax call returns array in example. there function called update new data observable , expect table rerender, not.
other deets
- sometimes there no model data in table load , wait update. other viewmodels loaded 1 array , 1 i'm having trouble with.
i have tried taking out if/ifnot business , not work.
fiddler hates me , have not been able set clean version of try.
- i leafed though of related questions , nothing seems fit issue. or example more complicated apply.
thanks!
the problem in code:
var viewmodel1 = { historyarray = ko.observablearray(); } you're mixing syntax declaring objects syntax code inside functions. when declaring object, don't use = , ;. instead use : , ,.
if change declaration below, should work.
var viewmodel1 = { historyarray: ko.observablearray() } 