javascript - knockout.js observablearray push not binding click -
i have html follows:
<table id="table"> <thead> <tr> <th>employee id</th> <th>name</th> <th>role</th> <th>actions</th> </tr> </thead> <tbody data-bind="foreach: employees"> <tr> <td data-bind="text: empid"></td> <td data-bind="text: name"></td> <td data-bind="text: role"></td> <td> <a data-bind="click: editemployee">edit</a> </td> </tr> </tbody> </table> <div id="createform"> <input id="empidc" /> <input id="namec" /> <input id="rolec" /> <button type="button" id="insertemployee">create</button> </div>
and have javascript file containing knockout code:
$('#insertemployee').click(function () { var empidc = $("#empidc").val(), namec = $("#namec").val(), rolec = $("#rolec").val(); $.ajax({ type: "post", url: "/employees/create", data: json.stringify({ "empid": empidc, "name": namec, "role": rolec }), contenttype: "application/json; charset=utf-8", datatype: "json", success: function (msg) { // data gets inserted in db , alert statement executing alert(msg); elist.employees.push({ empid:empidc, name:namec, role:rolec }); }, error: function (xhr, status, error) { alert(xhr.responsetext); } }); }); var getemployees=function(){ return $.get("/employees/fetchemployees"); } //view model employees var employeelistvm = function () { var self = this; self.employees = ko.observablearray(); getemployees().done(function (data) { var emp = data.map(function (e) { return (new employees(e)); }); self.employees(emp); }); }; //model employees function employees(data) { var self = this; this.empid = ko.observable(data.empid); this.name = ko.observable(data.name); this.role = ko.observable(data.role); this.editemployee = function (record) { var eedit = new singleemployee(record); var cont = document.getelementbyid("editform"); ko.cleannode(cont); ko.applybindings(eedit, cont); $("#editform").dialog({ autoopen: false, modal: true, width: 450, title: "edit selected record(s)" }); $("#editform").dialog("open"); }; } // viewmodel editing single record function singleemployee(data) { var self = this; this.empid = ko.observable(data.empid); this.name = ko.observable(data.name); this.role = ko.observable(data.role); }; var elist = new employeelistvm(); ko.applybindings(elist, document.getelementbyid("table"));
when insert new record in div "createform", error:
uncaught referenceerror: unable process binding "click: function (){return editemployee }" message: editemployee not defined
the new row getting displayed, edit link newly inserted record not work
edit:
i solved problem. problem "object" getting passed employees(data) , not "employees". in insertemployee click, changed code to:
var newemp = new employees({ empid: empidc, name: namec, role: rolec }); elist.employees.push(newemp);
is data getting server side controller , updating db? ajax call post data , call create method on server, in success section assumes ok on server. success path here client side call ok, it's not server success. have alert statement, need ensure server side posted data before attempting retrieve later in refresh of page.
Comments
Post a Comment