淘汰选定项目更改

Question

我正在尝试使用类似于 silverlight 中的数据表单的数据网格来创建数据表单功能。

我有一个 div 来显示从网格中选择的项目：

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

在我的视图模型中，我有一个设置所选项目的功能：

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

选中的Item定义如下：

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

但是，每当我更改 selectedEntry 对象时，UI 都不会更新。这是因为 UI 绑定到对象的成员而不是对象本身吗？如何直接绑定到 selectedEntry？

Answer 1

如果没有看到您的整个代码，很难确定确切的问题，但这里有一个 JSFiddle，它以稍微不同的方式演示了您尝试做的事情：

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

选择“加载矩阵”以加载表格。您可以选择任何项目来填充详细信息。

--

我猜您的问题在于您如何处理“selectedEntry”。如果底层对象是可观察的，Knockout 只会更新绑定。看起来你正在使用一个普通的 JS 对象。一旦你处理了一个 observable，将你的绑定更改为“selectedEntry().expenseDate”的形式。注意 ()... Knockout 将 observables 创建为函数，因此您使用 observableName() 来读取并使用 observableName(value) 来写入。当您使用 JavaScript 表达式时，您需要使用“读取”表单。在我的示例中，我使用了一个容器 div，以便我可以使用“with”来设置外部上下文，这允许您的内部绑定只是“expenseDate”。