Kendo UI 带有文本字段和值列表的模板

Question

我有一个带有文本字段和单选按钮列表的表单。它使用 window 弹出窗口显示。我可以将简单的参数传递给模板，但我不知道如何传递值列表。我需要动态生成单选按钮列表。我使用列表视图进行了测试，但它会按列表中的每个项目重复我表单上的文本字段和标签。有什么建议吗？

<div id="products">                
   <div id="details" />             
</div>

<script id="tmplSell" type="text/x-kendo-template">

   <div  align="left">
       <p>Please, fill the fields </p> 
       <b>Product:</b> <br /> 
       <input type="text" name="txtProduct" id="txtProduct" class ="k-textbox" /> <br />
       <b>Specify Color:</b>

       <!-- dynamic radio button list -->

       <button type="button" id="Button1" class="k-button" onclick="send(); return false; ">Send</button>&nbsp;
    </div>
</script>   
<script>
   var template = kendo.template($("#tmplSell").html());
   var window = $("#products").data("kendoWindow");

 record = {id:0}; //passing a simple value, I need to pass a list of objects like ({color:"red",available:"5"} {color:"blue", available:"1"}

 var entryHtml = template(record);
 $("#details").html(entryHtml);

  window.open().center();
</script>

Answer 1

以下代码来自 kendo 模板文档 (Overview of templates)，请记住，在模板内部您可以使用 javascript 表达式

<div id="example"></div>

    <script id="javascriptTemplate" type="text/x-kendo-template">
        <ul>
        # for (var i = 0; i < data.length; i++) { #
            <li>#= data[i] #</li>
        # } #
        </ul>
    </script>

    <script type="text/javascript">
        //Get the external template definition using a jQuery selector
        var template = kendo.template($("#javascriptTemplate").html());

        //Create some dummy data
        var data = ["Todd", "Steve", "Burke"];

        var result = template(data); //Execute the template
        $("#example").html(result); //Append the result
    </script>

在您的情况下，您可以使用 data[i].color 或 data[i].available

访问任何属性

Kendo UI 带有文本字段和值列表的模板

Kendo UI Template with textfield and list of values

forms

templates

list

parameter-passing

kendo-ui