заселение KendoComboBox со списком

Question

согласно документации 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]" }, 
     } 
     ]  

, но это не нравится синтаксис этого.

Answer 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">