knockout.js - Unable to bind values after inserting table rows with jquery -
i have in html:
<table class="datatable" id="cadatatable"> <thead> <tr> <th> type</th> <th> name</th> <th> adress</th> <th> id number</th> <th> contact</th> <th> note</th> </tr> </thead> <tbody> <tr> <td> <select name="catype" id="catype" data-bind="value: catype" style="width: 12em;"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> <!-- <td><input type="text" name="catype" data-bind="value: catype" style="width: 9em;"></td> --> <td><input type="text" name="caname" data-bind="value: caname" style="width: 15em;"></td> <td><input type="text" name="caadress" data-bind="value: caadress" style="width: 15em;"></td> <td><input type="text" name="caidnum" data-bind="value: caidnum" style="width: 6em;"></td> <td><input type="text" name="cacontact" data-bind="value: cacontact" style="width: 10em;"></td> <td><input type="text" name="canote" data-bind="value: canote" style="width: 15em;"></td> </tr> </tbody> </table> <button type="button" id="export" class="button" data-bind="click: newcreditrows">add new row</button> and jquery code inside of knockout js view model, witch executed when button pressed:
var clickadd = 0; newcreditrows = function(){ clickadd++; if(clickadd<=9){ $('#cadatatable tr:last').after('<tr><td><select name="catype' +clickadd+ '" id="catype' +clickadd+ '" data-bind="value: catype' +clickadd+ '" style="width: 12em;"><option>Съдлъжник</option> <option>Поръчител</option> <option>3то Лице</option> <option>ипотекарни / заложни длъжници</option> </select></td><td><input type="text" name="caname' +clickadd+ '" data-bind="value: caname' +clickadd+ '" style="width: 15em;"></td><td><input type="text" name="caadress' +clickadd+ '" data-bind="value: caadress' +clickadd+ ' " style="width: 15em;"></td><td><input type="text" name="caidnum' +clickadd+ ' " data-bind="value: caidnum' +clickadd+ '" style="width: 6em;"></td><td><input type="text" name="cacontact' +clickadd+ '" data-bind="value: cacontact' +clickadd+ ' "style="width: 10em;"></td><td><input type="text" name="canote' +clickadd+ '" data-bind="value: canote' +clickadd+ '" style="width: 15em;"></td></tr>'); }else alert("maximum number reached!"); }; everything working fine, noticed new rows added jquery code can not bind value ko.observable() variables (i have declared correctly in viewmodel, i'm not posting because code become huge.)
i mean observable caadress1 witch declared in code: '" data-bind="value: caadress' +clickadd not working.
i'm sure i'm missing small char escaping, i'm still new in jquery , knockout, i'm not able spot it.
you injecting html dom after called applybindings method. ko not aware of new elements.
take @ this fiddle
var ca = function() { this.caname = null; this.caadress= null; this.caidnum = null; this.cacontact = null; this.caname = null; this.canote= null; this.catype = null; }; var vm = { newcreditrows : function () { this.creditrows.push(new ca()); }, creditrows : ko.observablearray() }; ko.applybindings(vm); i hope helps.
Comments
Post a Comment