如何为Kendo UI Wizard配置只读确认审核步骤

针对你遇到的第二步确认字段为空的问题，核心原因通常是第二步控件初始化时未被MVVM正确绑定（Wizard默认只渲染当前激活步骤的内容，非激活步骤的控件可能没完成绑定），以下是几种不打破「1属性:1字段」规则的简洁方案：

方案一：复用原ViewModel属性，激活步骤时重新绑定 #

直接让第二步的确认字段绑定第一步对应的ViewModel属性，通过步骤的activate事件确保控件与ViewModel同步，同时设置只读：

1. 第一步输入控件绑定原属性：

<input data-bind="value: userName" class="k-textbox" />

2. 第二步确认控件绑定同一属性并设为只读：

<input data-bind="value: userName" readonly="readonly" class="k-textbox k-state-disabled" />

3. 配置Wizard的第二步激活事件，手动完成绑定：

$("#wizard").kendoWizard({
  steps: [
    { title: "填写信息", content: $("#step1-content") },
    { 
      title: "确认信息", 
      content: $("#step2-content"),
      activate: function(e) {
        // 绑定当前步骤的所有控件到ViewModel，确保值同步
        kendo.bind(e.step.element, viewModel);
      }
    }
  ]
});

var viewModel = kendo.observable({
  userName: ""
});
// 初始化绑定Wizard容器
kendo.bind($("#wizard"), viewModel);

这种方案完全复用原属性，严格遵循「1属性:1输入字段」的规则，确认字段只是原属性的另一展示载体。

方案二：使用ViewModel计算属性做只读映射 #

如果担心多控件绑定同一属性可能出现意外（实际Kendo MVVM支持多控件绑定同一属性），可以给ViewModel添加只读计算属性，专门用于第二步展示：

1. 定义ViewModel的计算属性：

var viewModel = kendo.observable({
  userName: "",
  // 计算属性，仅返回原属性值，不允许修改
  get confirmUserName() {
    return this.get("userName");
  },
  set confirmUserName(val) {
    // 空实现，禁止修改确认字段的值
  }
});

2. 第二步控件绑定计算属性：

<input data-bind="value: confirmUserName" readonly="readonly" class="k-textbox k-state-disabled" />

这种方案既保持了原属性与第一步输入框的1:1映射，又通过计算属性隔离了确认环节的修改操作，逻辑更清晰。

方案三：利用stepChange事件强制同步属性值 #

如果你的场景中存在自定义控件或特殊绑定逻辑，可在步骤切换时强制触发ViewModel的属性更新，确保第二步控件获取最新值：

$("#wizard").kendoWizard({
  stepChange: function(e) {
    // 从第一步切换到第二步时触发
    if (e.from.index === 0 && e.to.index === 1) {
      // 重新设置属性值，触发MVVM同步
      viewModel.set("userName", viewModel.get("userName"));
    }
  }
});

这个方案是兜底手段，适合MVVM自动同步失效的特殊场景。

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