asp.net mvc - knockout binding mvc not working -
i experimenting mvc , knockout.js maybe have binding problem.
my viewmodel is:
var urlpath = window.location.pathname; var currencyvm = function () { var self = this; var validationoptions = { insertmessages: true, decorateelement: true, errorelementclass: 'errorfill' }; ko.validation.init(validationoptions); //viewmodel self.id = ko.observable(0); self.id_region = ko.observable(""); self.description = ko.observable(""); self.symbol = ko.observable(""); self.paypalcode = ko.observable(""); self.ifscode = ko.observable(""); self.isgridvisible = ko.observable(true); self.iseditvisible = ko.observable(false); self.isaddvisible = ko.observable(false); //objects --------------------------------------------- self.currency = ko.observable(); self.currencys = ko.observablearray([]); //methods --------------------------------------------- //edit self.editcurrency = function (dataitem) { self.isgridvisible(false); self.iseditvisible(true); self.id = ko.observable(dataitem.id); self.id_region = ko.observable(dataitem.id_region); self.description = ko.observable(dataitem.description); self.symbol = ko.observable(dataitem.symbol); self.paypalcode = ko.observable(dataitem.paypalcode); self.ifscode = ko.observable(dataitem.ifscode); //var vm = ko.mapping.fromjs(dataitem); //self.currency(vm); }; //add self.addcurrency = function () { self.isgridvisible(false); self.isaddvisible(true); self.iseditvisible(false); self.reset(); } // cancel edit self.canceledit = function () { self.iseditvisible(false); self.isgridvisible(true); } // cancel add self.canceladd = function () { self.isaddvisible(false); self.isgridvisible(true); } //reset self.reset = function () { self.id(0); self.id_region(""); self.description(""); self.symbol(""); self.paypalcode(""); self.ifscode(""); } //actions -------------------------------------------------- var currency = { id: self.id, id_region: self.id_region, description: self.description, symbol: self.symbol, paypalcode: self.paypalcode, ifscode: self.ifscode }; //create self.createcurrency = function () { $.ajax({ url: "/currency/createcurrency", cache: false, type: 'post', contenttype: 'application/json; charset=utf-8', data: ko.tojson(currency), success: function (data) { self.iseditvisible(false); self.isaddvisible(false); self.isgridvisible(true); $("#gridcurrencies").data("kendogrid").datasource.read(); } }).fail( function (xhr, textstatus, err) { alert(err); }); } // update self.updatecurrency = function () { $.ajax({ url: "/currency/updatecurrency", cache: false, type: 'post', contenttype: 'application/json; charset=utf-8', data: ko.tojson(currency), success: function (data) { self.iseditvisible(false); self.iseditvisible(false); self.isgridvisible(true); $("#gridcurrencies").data("kendogrid").datasource.read(); } }) } //delete self.deletecurrency = function (currency) { $.confirm({ title: "delete", content: "sure delete ?", confirm: function () { $.ajax({ url: "/currency/deletecurrency", cache: false, type: 'post', contenttype: 'application/json; charset=utf-8', data: ko.tojson(currency), success: function (data) { $("#gridcurrencies").data("kendogrid").datasource.read(); } }).fail( function (xhr, textstatus, err) { alert(err); }); }, cancel: function () { } }); } }; in view call applybinding , based on selected row of telerik grid call editcurrency or deletecurrency.
<script> var viewmodel = null; $(function () { viewmodel = new currencyvm(); ko.applybindings(viewmodel); }); function deletecurrency(e) { var dataitem = this.dataitem($(e.currenttarget).closest("tr")); viewmodel.deletecurrency(dataitem); } function editcurrency(e) { var dataitem = this.dataitem($(e.currenttarget).closest("tr")); viewmodel.editcurrency(dataitem); } </script> in markup have html elements bindings:
thi div add:
<div class="panel panel-default" data-bind="visible: isaddvisible" style="display:none"> <div class="panel-heading">add new currency</div> <div class="panel-body"> <div class="row"> <div class="col-md-3"> @html.labelfor(model => model.ifscode) <input type="text" data-bind="value: $root.ifscode, valueupdate: 'keypress'" class="form-control " /> </div> <div class="col-md-3"> @html.labelfor(model => model.paypalcode) <input type="text" data-bind="value: $root.paypalcode, valueupdate: 'keypress'" class="form-control " /> </div> <div class="col-md-3"> @html.labelfor(model => model.symbol) <input type="text" data-bind="value: $root.symbol, valueupdate: 'keypress'" class="form-control " /> </div> </div> <div class="row"> <div class="col-md-9"> @html.labelfor(model => model.description) <input type="text" data-bind="value: $root.description" class="form-control" /> </div> </div> <br /> <div class="row"> <div class="col-md-3"> <input data-bind="click: $root.createcurrency" type="button" class="btn btn-success btn-sm" value="@dbres.t("save", "common")" /> <input data-bind="click: canceladd" type="button" class="btn btn-warning btn-sm" value="@dbres.t("cancel", "common")" /> </div> </div> </div> the edit div add div use different binding data-bind="value: ifscode"
the problem in add mode work when edit dont see nothing in textbox elements.
also use debug, in add mode can see observables updating while type in textbox, in edit mode observables emtpy , remain while typeing something.
may body please understand appen code appreciated.
Comments
Post a Comment