Roland Wales February 2016

Using Knockout JS, update a table cell on a screen from Javascript

I am using Knockout JS to work with an editable grid. Updates work fine when typing values into the table cells. However, I need to set a date as a result of clicking a "set complete date" button. The Javascript update sets the value in the view model, but does not update the table cell on the screen. Based on web searches, this should work if the cell is observable. For some reason, it doesn't. The attached code is self contained, and illustrates the problem.

The following code is a simplified version of what I'm trying to accomplish. By clicking on the name field, the view model is updated with "a new name". I want this to update the cell on the html display as 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<        

Answers


Eric Bronnimann February 2016

I copied and pasted your code into JSFiddle. The issue is in the nameClick() function. You are setting the seat.name value to a new observable, when it should just update the observable.

Change the following:

seat.name = ko.observable("a new name");

To this:

seat.name("a new name");

And the code should work.

Post Status

Asked in February 2016
Viewed 3,525 times
Voted 4
Answered 1 times

Search




Leave an answer