用列表填充 KendoComboBox答案

【问题标题】：populating KendoComboBox with list用列表填充 KendoComboBox
【发布时间】：2016-06-20 19:16:23
【问题描述】：

根据KendoComboBox文档，填充方式如下：

 $("#teamName").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",                
                    dataSource: [
                  { text: "Item1", value: "1" },
                  { text: "Item2", value: "2" }
                ]
            })

但现在我在视图中有一个列表，该列表存储在 Model.Teams 中。有人可以建议一种用 Model.Teams 中的数据填充组合框的好方法吗？

例如：我想做类似的事情：

...
 var model = (function () {
                return {
                    Teams: '@Model.Teams'
                }});
...
...
dataSource: [
         for (var i = 0; i < model.Teams.Count; i++) {
            { text: "model.Team[i]", value: "model.Team[i]" },
         }
         ]

但它不喜欢 this 的语法。

【问题讨论】：

Team 对象是什么样的？基本上它就像下面一样，但带有以团队成员命名的文本和值字段以及您想要的信息（ID，名称或类似的可能）数据源：Model.Teams
它只是一个字符串列表。更新了 OP，更多地了解我想要实现的目标
你能用你目前拥有的东西创建一个 jsFiddle 吗？
jsfiddle.net/6nawtsgs 。我创建的 teams 变量只是一个演示，实际上，teams 变量可能有很多条目，这就是我想用 for 循环来做的原因。

标签： jquery asp.net-mvc kendo-ui

【解决方案1】：

如果您想使用 MVC，那么您应该可以在 Kendo's Demo 页面上关注。

我更新了您的 jsFiddle 以在 JavaScript 中完成所有这些操作。

var teams = ["A team", "B team"];
var ds = new kendo.data.DataSource();

$("#teamName").kendoComboBox({
  dataTextField: "text",
  dataValueField: "value",
  dataSource: ds
});

//Can use either method to add items to the data source
if (true) { //Change my to false, same results!
  for (var i = 0; i < teams.length; i++) {
    ds.add({
      text: teams[i],
      value: teams[i]
    });
  }
} else {
  ds.data(teams.map(function(team) {
    return { text: team, value: team };
  }));
}

<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<input id="teamName" name="team" placeholder="Team name" style="width:300px">

【讨论】：