javascript - Foreach works with template but breaks without template -

javascript - Foreach works with template but breaks without template -

i have next code loads info view model via ajax , displays it:

class="lang-html prettyprint-override"><tbody id="filtered-table" data-bind="template: {name:'asset', foreach:assets}"> </tbody>

and template looks this:

class="lang-html prettyprint-override"><script type="text/html" id="asset"> <tr> <td style="vertical-align: middle" data-bind="text: id">&nbsp;</td> <td><img data-bind="attr:{ src: '/manager/files/' + poster }" height="100px" /></td> <td style="vertical-align: middle"><span dir="auto" data-bind="text: name"></span></td> <td style="vertical-align: middle" data-bind="text: category"></td> <td style="vertical-align: middle" data-bind="text: type"></td> <td style="vertical-align: middle" data-bind="text: popup"></td> </tr> </script>

and works fine.

the problem not want utilize template, instead want alter foreach bound element looking this:

class="lang-html prettyprint-override"><tbody id="filtered-table" data-bind="foreach: assets, visible: assets().length > 0"> <tr > <td style="vertical-align: middle" data-bind="text: id">&nbsp;</td> <td><img data-bind="attr:{ src: '/manager/files/' + poster }" height="100px" /></td> <td style="vertical-align: middle"><span dir="auto" data-bind="text: name"></span></td> <td style="vertical-align: middle" data-bind="text: category"></td> <td style="vertical-align: middle" data-bind="text: type"></td> <td style="vertical-align: middle" data-bind="text: popup"></td> </tr> </tbody>

even though didn't alter in view model (i took html elements out of template , set them foreach binded element) next error:

uncaught error: unable parse binding attribute. message: referenceerror: id not defined; attribute value: text: id

i much appreciate if explain doing wrong. tia!

here viewmodel , ajax code part:

$(function() { $.ajax({ url: '/assets/getjson/', type: "get", datatype: 'json', async: false, contenttype: "application/json", success: function (data) { console.log(data); var viewmodel = new viewmodel(data); ko.applybindings(viewmodel); } }); }); function viewmodel(assets) { var self = this; self.assets = ko.observablearray(assets); self.allassets = assets; self.query = ko.observable(''); self.search = function(value) { self.assets.removeall(); for(var x in self.allassets) { if(self.allassets[x].name.tolowercase().indexof(value.tolowercase()) >= 0) { self.assets.push(self.allassets[x]); } } }; self.query.subscribe(self.search); }

here snippet of response info (1st result):

{"id":"2","name":"\u05d9\u05e0\u05d8\u05dc","poster":"pic011.jpg","category":null,"type":"movie","popup":null}

your template includes line:

<td style="vertical-align: middle" data-bind="text: type">&nbsp;</td>

the equivalent line in non-template code:

<td style="vertical-align: middle" data-bind="text: id">&nbsp;</td>

in copying it, appeared have changed type id. seek changing type , see if works.

javascript templates knockout.js foreach