窗口中的简单Kendo DropDownList绑定

时间:2019-02-09 00:46:24

标签: kendo-ui

我在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 Bin:https://jsbin.com/wariyorilo/edit?html,js,output

我想念什么?预先感谢。

0 个答案:

没有答案