问题视频演示：http ://www.screenr.com/k168
- 我单击“y”按钮从服务器获取一些数据。
- 我单击第一个结果的“显示详细信息”链接 ( y-cof-dmx ) 以显示记录详细信息视图 - 记下药物名称（在模式标题栏/数据表中和控制台下方）。他们都匹配。到目前为止，一切都很好。
- 我单击下一个结果的“显示详细信息”链接（Yasmin 28）。注意模态和控制台中的药物名称。控制台知道当前模型对象，但模式没有更新，它仍然是“旧”结果y-cof-dmx。
- 下一个结果（Yaz）也是如此，仍然在模态中显示“旧”结果。
- 我在模式中编辑药物名称 - 它会在整个 UI 中更新，并在我再次打开模式时反映出来。
我的 observable 正在更新，但并非一直如此。我不确定这是为什么。
我所有的代码都在http://jsfiddle.net/6fm5T/虽然它不会在小提琴中运行。
代码的有趣部分，模态可以找到寻找：
<!-- start modal: drug details -->
<div data-bind="with: selectedItem">
在JS中，有：
//show details in modal
viewModel.showDetails = function(obj) {
//add/update currently selected drug
viewModel.selectedItem(obj);
console.log(viewModel.selectedItem().drugName());
//show modal dialog
$('#dialog').dialog('open');
};
我正在尝试更新在 showDetails 上方仅声明几行的 observable：
selectedItem: ko.observable(),
我正在处理的数据是简单的对象，可以在http://jsfiddle.net/Gm64C/2/的 JavaScript 窗格顶部看到结构（忽略那里的所有其他内容）。
非常感谢任何见解！
我在下面的第一条评论中的更新
以下是我修订的相关部分。在 html 中，我必须调用 drugName 作为函数：
由此：
<!-- start modal: drug details -->
<div data-bind="with: selectedItem">
<div id="dialog" data-bind="jqDialog: {title: drugName}">
对此：
<!-- start modal: drug details -->
<div data-bind="with: selectedItem">
<div id="dialog" data-bind="jqDialog: {title: drugName()}">
这是我用于 jquery UI 对话框的新自定义 KO 绑定：
由此：
ko.bindingHandlers.jqDialog = {
init: function(element) {
//console.log('jqDialog init');
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).dialog('destroy');
});
//setup modal dialog options - details view
$('#dialog').dialog({
autoOpen: false,
closeOnEscape: true,
modal: true,
width: 850,
height: 500
});
},
update: function(element, valueAccessor) {
//console.log('jqDialog update');
var options = ko.toJS(valueAccessor());
//console.log(options);
if (options) {
//console.log('jqUpdate options');
$(element).dialog(options);
}
}
};
对此：
ko.bindingHandlers.jqDialog = {
init: function(element, valueAccessor) {
var options = ko.utils.unwrapObservable(valueAccessor()),
modalDefaults = {
autoOpen: 'false',
closeOnEscape: 'true',
modal: 'true',
width: '850',
height: '500'
};
$.extend(options, modalDefaults);
setTimeout(function() {
$(element).dialog(options || {});
}, 0);
//handle disposal (not strictly necessary in this scenario)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).dialog('destroy');
});
},
update: function(element, valueAccessor, allBindingsAccessor) {
var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible);
$(element).dialog(shouldBeOpen ? 'open' : 'close');
}
};