javascript - Duplicate records are displayed while trying to bind different data to the same div using knockout js -
i have div displays 10 records time.when user clicks on next link, next 10 records loaded server. after binding, newly added records shown multiple times. kindly me know going wrong.
function displaylastmonthvolume() { $.ajax({ type: "post", url: "dashboard.aspx/getlastmonthvolume", contenttype: "application/json; charset=utf-8", datatype: "json", success: function (response) { if (response != undefined && response != '') { var data = json.parse(response.d); var totalamt = 0; (var p = 0; p < data.length; p++) { totalamt += data[p].amount; } data.totalamt = totalamt; ko.cleannode(document.getelementbyid('lastmonth_trans')); ko.applybindingstodescendants(data, document.getelementbyid('lastmonth_trans')); } }, failure: function (response) { alert(response.d); } }); return true; }
ui :
<div class="lastmonthdialogpopup" title="transaction made on last days"> <table id="lastmonth_trans" width="100%" cellspacing="0" cellpadding="0" border="0" class="device_tbl" > <thead><tr><th valign="middle" align="center">date</th> <th valign="middle" align="left">merchant name</th> <th valign="middle" align="center"> amount </th> <th valign="middle" align="left"> pty_id </th> </tr></thead> <tbody data-bind="foreach: $root"> <tr><td valign="middle" align="left" data-bind="text: date"> </td> <td valign="middle" align="left" data-bind="text: name"> </td> <td valign="middle" align="right" data-bind="text: amount.tofixed(2)"> </td> <td valign="middle" align="left" data-bind="text: ptyid"> </td> <td valign="middle" align="left" data-bind="text: id"> </td> </tr> </tbody><tfoot><tr><td><b>total</b></td> <td></td> <td valign="middle" align="right" data-bind="text: totalamt.tofixed(2)">/td> <td></td> </tr> </tfoot></table> <a id="expandlink" onclick="displaylastmonthvolume()" style="cursor: pointer; color: #ff8c00;">next</a> </div>
all need bind once , replace new data in observable array, 2 way data-binding replace rendered items in foreach binding new ones.
here sample exemplifies you:
var viewmodel = { // data entries: ko.observablearray(), numberofrecords: ko.observable(), datatimeoflastcall: ko.observable(), retrievelogs: function() { $.ajax({ type: 'post', url: '/echo/json/', data: { json: ko.tojson([ { id: 1, message: 'message one', machine: 'machine one', userid: 'user 1', entrydate: new date() }, { id: 2, message: 'message two', machine: 'machine two', userid: 'user 2', entrydate: new date() }, ]), delay: 1 }, context: this, success: function(data) { this.entries($.map(data, function(item) { return new logentry(item); })); }, datatype: 'json' }); } }; function logentry(item) { this.id = ko.observable(item.id); this.message = ko.observable(item.message); this.machine = ko.observable(item.machine); this.username = ko.observable(item.userid); this.entrydate = ko. observable(item.entrydate); return this; } ko.applybindings(viewmodel);
notice every time click button records in foreach replaced (check date changing)
Comments
Post a Comment