knockout.js - Using Knockout JS, update a table cell on a screen from Javascript -
i using knockout js work editable grid. updates work fine when typing values table cells. however, need set date result of clicking "set complete date" button. javascript update sets value in view model, not update table cell on screen. based on web searches, should work if cell observable. reason, doesn't. attached code self contained, , illustrates problem.
the following code simplified version of i'm trying accomplish. clicking on name field, view model updated "a new name". want update cell on html display well.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title> - fresh water buoy data maintenance</title> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <link href="/content/site.css" rel="stylesheet"/> <script src="/scripts/modernizr-2.6.2.js"></script> </head> <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title"><a href="/">fresh water buoys</a></p> </div> <div class="float-right"> <!-- <section id="login"> hello, <span class="username">som\roland.wales</span>! </section> --> <nav> <ul id="menu"> <li><a href="/">home</a></li> <li><a href="/home/about">about</a></li> <li><a href="/home/contact">contact</a></li> </ul> </nav> </div> </div> </header> <div id="body"> <section class="content-wrapper main-content clear-fix"> <h2>your seat reservations (<span data-bind="text: seats().length"></span>)</h2> <table> <thead> <tr> <th>passenger name</th> <th>meal</th> <th>modified name</th> <th>surcharge</th> <th></th> </tr> </thead> <tbody data-bind="foreach: seats"> <tr> <td><input data-bind="value: name, click: $root.nameclick" /></td> <td><select data-bind="options: $root.availablemeals, value: meal, optionstext: 'mealname'"></select></td> <td data-bind="text: modifiedname"></td> <td data-bind="text: formattedprice"></td> <td><a href="#" data-bind="click: $root.removeseat">remove</a></td> </tr> </tbody> </table> <button data-bind="click: addseat, enable: seats().length < 5">reserve seat</button> <h3 data-bind="visible: totalsurcharge() > 0"> total surcharge: $<span data-bind="text: totalsurcharge().tofixed(2)"></span> </h3> </section> </div> <footer> <div class="content-wrapper"> <div class="float-left"> <p>© 2016 - asp.net mvc application</p> </div> </div> </footer> <script src="/scripts/jquery-1.8.2.js"></script> <script src="/scripts/knockout-2.2.0.js"></script> <script type="text/javascript"> // class represent row in seat reservations grid function seatreservation(name, initialmeal) { var self = this; self.name = ko.observable(name); self.meal = ko.observable(initialmeal); self.modifiedname = ko.computed(function () { debugger; var name2 = self.name(); self.name(name2); return name2; }); self.formattedprice = ko.computed(function () { var price = self.meal().price; return price ? "$" + price.tofixed(2) : "none"; }); } // overall viewmodel screen, along initial state function reservationsviewmodel() { var self = this; // non-editable catalog data - come server self.availablemeals = [ { mealname: "standard (sandwich)", price: 0 }, { mealname: "premium (lobster)", price: 34.95 }, { mealname: "ultimate (whole zebra)", price: 290 } ]; // editable data self.seats = ko.observablearray([ new seatreservation("steve", self.availablemeals[0]), new seatreservation("bert", self.availablemeals[0]) ]); // computed data self.totalsurcharge = ko.computed(function () { var total = 0; (var = 0; < self.seats().length; i++) total += self.seats()[i].meal().price; return total; }); // operations self.addseat = function () { self.seats.push(new seatreservation("", self.availablemeals[0])); } self.removeseat = function (seat) { self.seats.destroy(seat) } /* use destroy instead of remove set _destroy property */ /* * attempt update name in table cell displays on screen. * updates view model, not not update visible display of table cell result of clicking on field. * if value of field changed typing on screen, "a new name" shows up. */ self.nameclick = function (seat) { var name2; (var = 0; < self.seats().length; i++) name2 = self.seats()[i].name(); seat.name = ko.observable("a new name"); seat.name.valuehasmutated(); (var = 0; < self.seats().length; i++) name2 = self.seats()[i].name(); } } ko.applybindings(new reservationsviewmodel()); </script> <!-- visual studio browser link --> <script type="application/json" id="__browserlink_initializationdata"> {"appname":"internet explorer","requestid":"d50efb9955144462bb4ac42399aca97d"} </script> <script type="text/javascript" src="http://localhost:51245/e1dce8087f8e4b289690f61d419887fb/browserlink" async="async"></script> <!-- end browser link --> </body> </html>
i copied , pasted code jsfiddle. issue in nameclick() function. setting seat.name value new observable, when should update observable.
change following:
seat.name = ko.observable("a new name"); to this:
seat.name("a new name"); and code should work.
Comments
Post a Comment