Kendo Window内DropDownList绑定后无法选中指定值求助

你遇到的问题核心是Kendo MVVM绑定的上下文没有正确建立——虽然你用了data-bind="value:HttpVerb"，但并没有把这个绑定和你的数据项关联起来，导致DropDownList不知道该选中哪个值。文本框能正常显示是因为你用了模板插值#= Url #直接把值硬编码到HTML里，但DropDownList依赖的是MVVM绑定，而不是静态值。

关键问题点 #

1. 你当前的代码只是用模板渲染出静态HTML，然后调用kendo.init初始化组件，但kendo.init仅负责把普通DOM转换成Kendo UI组件，不会处理data-bind的关联逻辑。
2. data-bind="value:HttpVerb"需要一个对应的ViewModel上下文才能生效，而你没有通过kendo.bind建立这个关联，所以DropDownList无法读取到你设置的HttpVerb值。

解决方案：使用Kendo MVVM完整绑定流程 #

推荐的做法是用Kendo Observable ViewModel来管理表单数据，通过kendo.bind把ViewModel和窗口内的DOM元素绑定，这样所有data-bind属性都会自动生效。

修改后的完整代码

<button onclick="OnButtonClick();">Click Me</button>
<div id="form-window"></div>

<script type="text/x-kendo-template" id="form-template">
<div class="form-group">
<label for="Url">URL</label>
<input name="Url" type="text" data-bind="value: Url" required="required" />
</div>
<div class="form-group">
<label for="HttpVerb">HTTP verb</label>
<input name="HttpVerb" data-bind="value:HttpVerb" data-source="httpVerbsDataSource" data-value-field="verb" data-text-field="verb" data-role="dropdownlist" />
</div>
</script>

<script type="text/javascript">
var formWindow = $("#form-window")
.kendoWindow({
 title: "Form",
 modal: true,
 visible: false,
 resizable: false,
 scrollable: false,
 width: 500,
 actions: ["Close"]
}).data("kendoWindow");

var formTemplate = kendo.template($("#form-template").html());

// 创建ViewModel，统一管理表单数据和数据源
var viewModel = kendo.observable({
  Url: "",
  HttpVerb: "",
  httpVerbsDataSource: new kendo.data.DataSource({
    data: [
      { verb: "GET" },
      { verb: "POST" },
      { verb: "PUT" }
    ]
  })
});

function OnButtonClick(e) {
  // 更新ViewModel的数据
  viewModel.set("Url", "abcdef");
  viewModel.set("HttpVerb", "POST");
  
  // 用ViewModel的数据渲染模板
  var windowContent = formTemplate(viewModel.toJSON());
  formWindow.content(windowContent);
  
  // 关键：将ViewModel绑定到窗口内的DOM元素
  kendo.bind(formWindow.element.children(), viewModel);
  
  formWindow.center().open();
}
</script>

关键修改说明

1. 统一用ViewModel管理数据：把表单字段和DropDownList的数据源都放到kendo.observable实例中，这样所有数据都有统一的上下文。
2. 全量使用data-bind：文本框也改成data-bind="value: Url"，放弃模板插值，保持绑定逻辑一致。
3. 调用kendo.bind建立关联：在设置窗口内容后，通过kendo.bind把ViewModel和窗口内的DOM元素绑定，这样data-bind属性就能正确读取ViewModel的值，DropDownList会自动选中对应的选项。

备选方案：手动设置DropDownList值（不推荐） #

如果你暂时不想重构为MVVM模式，也可以在初始化组件后手动设置DropDownList的选中值，但这种方式失去了MVVM双向绑定的优势，需要额外维护数据同步：

// 先把dataItem变成全局变量或者通过其他方式传递到open事件
var currentDataItem;

function OnButtonClick(e) {
  currentDataItem = { Url: "abcdef", HttpVerb: "POST" };
  var windowContent = formTemplate(currentDataItem);
  formWindow.content(windowContent);
  formWindow.center().open();
}

// 修改window的open事件
var formWindow = $("#form-window")
.kendoWindow({
 // ... 其他配置
 open: function () {
   kendo.init($("#form-window"));
   // 手动初始化后设置选中值
   $("#form-window [name='HttpVerb']").data("kendoDropDownList").value(currentDataItem.HttpVerb);
 }
}).data("kendoWindow");

但这种方式不够优雅，而且当数据更新时需要手动同步UI，所以更推荐使用MVVM的完整绑定方案。

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