Question

I am trying to create a dataform functionality using a datagrid similar to the dataform in silverlight.

I have a div to display the selected item from the grid:

$('#readDate').attr('data-bind', 'text : selectedEntry.expenseDate');
$('#readDesc').attr('data-bind', 'text : selectedEntry.expenseDescription');
$('#readAmount').attr('data-bind', 'text : selectedEntry.expenseAmount');

in my view model, I have a function to set the selected item:

this.setSelectedEntry = function (id) {
                 vm.selectedEntry = vm.data()[id];
}

The selected Item is defined like this:

function ExpenseEntry(Id, expenseDate, expenseDescription, expenseAmount) {
             this.Id = Id;
             this.expenseDate = ko.observable(expenseDate);
             this.expenseDescription = ko.observable(expenseDescription);
             this.expenseAmount = ko.observable(expenseAmount);
         }

However, whenever I change the selectedEntry object, the UI is not updated. Is this because the UI is bound to the members of the object and not the object itself? how can I bind to the selectedEntry directly?

Answer 1

Without seeing your entire code it’s hard to pinpoint the exact issues, but here is a JSFiddle that demonstrates what you are trying to do in a slightly different way:

http://jsfiddle.net/jearles/wgZ59/50/

Select ‘Load matrix’ to load a table. You can select any item to populate the details.

—

I’m guessing that your issue is in how you are dealing with “selectedEntry”. Knockout will only update bindings if the underlying object is an observable. It looks like you are using a plain JS object. Once you are dealing with an observable, change your bindings to the form ‘selectedEntry().expenseDate’. Note the ()… Knockout creates observables as functions, so you use observableName() to read and observableName(value) to write. As you are using a JavaScript expression you need to use the “read” form. In my example I use a container div so that I can use “with” to setup the outer context, which allows your inner bindings to be just ‘expenseDate’.