kendo-ui - 窗口中的简单 Kendo DropDownList 绑定

Question

我在 Kendo 窗口中有一个带有 DropDownList 的表单，我想将现有数据绑定到它。这方面的例子比比皆是，我以前在其他情况下也做过，但是这个（看起来应该很容易）让我失望了，因为我似乎一辈子都无法让 DropDownList 显示正确价值。我想我一定错过了一些非常简单的东西，但我已经一年多没有练剑道了，而且看看我以前的工作也对我没有帮助。

极其简化的代码：

<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" 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"],
        open: function () {
            kendo.init($("#form-window"));
        }
    }).data("kendoWindow");
  var formTemplate = kendo.template($("#form-template").html());

  var httpVerbsDataSource = new kendo.data.DataSource({
    data: [
        { verb: "GET" },
        { verb: "POST" },
        { verb: "PUT" }
    ]
  });

  function OnButtonClick(e) {
    var dataItem = {
        Url: "abcdef",
        HttpVerb: "POST"
    };

    var windowContent = formTemplate(dataItem);
    formWindow.content(windowContent);
    formWindow.center().open();
  }
</script>

当我单击按钮时，窗口打开并且表单文本字段已正确填充，并且 DropDownList 已正确绑定到数据源，但未选择我的数据项中的值。

JS 斌：https ://jsbin.com/wariyorilo/edit?html,js,output

我错过了什么？提前致谢。

标签： kendo-ui