Knockout与jQuery UI Dialog间的数据传递问题

你遇到的核心问题是jQuery UI Dialog会将目标DOM元素从原位置移到<body>末尾，导致Knockout的绑定上下文丢失，再加上点击事件没有传递当前项的数据，所以弹窗里拿不到对应的值。我给你两种可行的解决方案：

方案一：用ViewModel的Observable存储当前选中项（推荐） #

这种方式符合Knockout的响应式设计思路，实现起来更直观：

1. 在ViewModel中添加存储当前选中项的Observable

// 假设你的ViewModel是self
self.palletList = ko.observableArray(); // 你的原始数据列表
self.selectedPallet = ko.observable(); // 新增：存储当前点击的pallet项

self.openMyDialog = function(palletItem) {
  self.selectedPallet(palletItem); // 把点击的项存入Observable
  $("#WDIV").dialog("open");
};

2. 修改input的点击绑定，传递当前项
   原来的click: openMyDialog没有传参，需要改成传递循环中的当前项$data：

<input class='smallInput2 ui-keyboard-input ui-widget-content ui-corner-all' 
       data-bind="value: parentRoll, click: function() { $parent.openMyDialog($data); }">

3. 修改弹窗的绑定，指向选中项的属性
   弹窗现在可以通过ViewModel的selectedPallet拿到当前项，绑定改为：

<div id="WDIV">
  <input data-bind="value: selectedPallet().parentRoll">
</div>

4. 正确初始化Dialog
   在页面加载时初始化Dialog，设置默认关闭：

$(document).ready(function() {
  $("#WDIV").dialog({
    autoOpen: false,
    modal: true, // 可选：设置为模态框，防止用户操作背景
    width: 300 // 可选：调整弹窗宽度
  });
});

方案二：重新绑定Knockout上下文到弹窗 #

如果你不想新增Observable，可以在Dialog打开时，把当前项的上下文绑定到弹窗元素上：

1. 修改点击绑定传递当前项

<input class='smallInput2 ui-keyboard-input ui-widget-content ui-corner-all' 
       data-bind="value: parentRoll, click: function() { $parent.openMyDialog($data); }">

2. 修改openMyDialog函数，绑定上下文到弹窗

self.openMyDialog = function(palletItem) {
  const dialogElement = $("#WDIV").dialog("open")[0];
  // 将当前项作为上下文，重新绑定弹窗DOM
  ko.applyBindings(palletItem, dialogElement);
};

3. 简化弹窗的绑定
   现在弹窗的上下文就是当前点击的项，直接绑定parentRoll即可：

<div id="WDIV">
  <input data-bind="value: parentRoll">
</div>

4. 清理绑定（可选但推荐）
   避免多次绑定导致的冲突，在Dialog关闭时清理绑定：

$("#WDIV").dialog({
  autoOpen: false,
  close: function() {
    ko.cleanNode(this); // 清理当前弹窗的Knockout绑定
  }
});

额外注意事项 #

• 确保你的parentRoll是Observable类型，这样才能实现双向绑定（修改弹窗值同步回原列表）。比如每个pallet项结构应该是：

  {
    parentRoll: ko.observable("初始值")
  }
  

• 检查浏览器控制台有没有报错，比如Dialog未初始化、ViewModel未正确实例化等问题。

内容的提问来源于stack exchange，提问作者rkr