如何在 Kendo UI 中将动态输入字段设为数字文本框？答案

【问题标题】：How to make a dynamic input field as a numeric textbox in Kendo UI?如何在 Kendo UI 中将动态输入字段设为数字文本框？
【发布时间】：2015-09-07 11:13:12
【问题描述】：

这是我的情况。

我正在借助 article 制作动态表单。

在这里你可以看到它（文章演示）使用kendo template。

  <script id="fieldsTemplate" type="text/x-kendo-template">
        <li>
             <label data-bind="attr: { for: name}, text: label"></label>
             <input data-bind="attr: { type: type, name: name, class: css}" # if (get("required")) {# required #} # />
       </li>
  </script>

生成表单后，该表单只需使用HTML5 制作表单即可。它没有剑道属性。例如，如果我绑定了data-role 属性并且值为numerictextbox 它没有给我一个数字文本框（认为它的类型是数字）。它没有这些属性。（如果我输入一个数字，它不会显示默认的小数点。它只显示那个数字。）

但在this 示例中，如果我们将 data-role 属性和值添加为 numerictextbox，它将是一个数字文本框。

但在documentation 或this 中，似乎我必须调用 kendoNumericTextBox 方法来制作数字文本框。

即使我尝试将此代码添加到模板，但它不起作用（请假设我使用 this 正确添加此代码）。

      $("#mytextboxid").kendoNumericTextBox();

那我还有什么选择呢？？非常感谢

【问题讨论】：

标签： kendo-ui telerik kendo-mvvm kendonumerictextbox

【解决方案1】：

您必须在输入元素中设置 data-role 属性才能将元素转换为剑道控件/元素。请尝试使用以下代码 sn-p。

<body>
    <div id="example">
        <!-- container UL to host input fields -->
        <ul data-template="fieldsTemplate" data-bind="source: fields"></ul>
    </div>


    <!-- Kendo Template binds properties from model to input fields -->
    <script id="fieldsTemplate" type="text/x-kendo-template">
        <li>
            <label data-bind="attr: { for: name}, text: label"></label>
            <input name=#= name #  class=#= css # # if (get("required")) {# required #} # 
              # if (type == 'number') {# data-role="numerictextbox" #}else{# type=#=type#  #}#  />
        </li> 
    </script>

    <script type="text/javascript">
        // retrieve the model from an API call
        var model = {
            "fields": [{
                "css": "cssClass1",
                "label": "Field 1",
                "name": "Field1",
                "required": false,
                "type": "text"
            },
            {
                "css": "cssClass2",
                "label": "Field 2",
                "name": "Field2",
                "required": true,
                "type": "number"
            },
            {
                "css": "cssClass2",
                "label": "Checkbox Field",
                "name": "CheckField",
                "required": false,
                "type": "checkbox"
            },
            {
                "css": "cssClass2",
                "label": "Email Address",
                "name": "Email",
                "required": true,
                "type": "email"
            },
            {
                "css": "cssClass2",
                "label": "Password",
                "name": "Password",
                "required": true,
                "type": "password"
            }
            ]
        };
        // convert the JSON to observable object
        var viewModel = kendo.observable(model);
        // bind the model to the container
        kendo.bind($("#example"), viewModel);

    </script>
</body>

JSFiddle

如果有任何问题，请告诉我。

【讨论】：

我已经试过你的方法了。但这对我不起作用。工作正常。但不显示剑道数字文本框。
我在 JSFiddle 中创建了完整的演示，并在我上面的答案中添加了它的链接。 Filed2 有剑道数字文本框。
嘿兄弟.. 我在你的帮助下完成了。这是向输入字段添加类的情况。谢谢老哥的帮助。也适用于 JSFiddle