带有 NumericTextBox 数据初始化的 ListView

Question

我有一个手动绑定的列表视图：

$("#List").kendoListView({
     template: kendo.template($("#ItemTemplate").html()),
     autoBind: false,
     dataSource: new kendo.data.DataSource({
        data: []
     })
  });

最初我绑定列表，然后用一些数据加载它：

$("#ActButton").on("click", function(e) {
     .
     .

     var  list = $("#List").data("kendoListView");
     list.dataSource.data(data);
     list.refresh();

在绑定的模板中，我有一个要初始化为数字文本框的控件。我希望使用数据属性，但它无法识别：

<input type="text" name="NewAmount" data-role="numerictextbox" 
       data-format="##.####" data-decimals="2" data-spinners="false" 
       min="0" max="#= Amount #" value="" />

如何初始化列表视图中的数字文本框？

注意：我没有使用 MVVM，所以我最初使用 kendo.bind("body") 来连接 UI，但没有使用数据绑定来连接额外的数据。

Answer 1

我以前处理过类似的问题，我有一个 dojo example，其中有一个列表视图（某种）和带有 show/hide 文本框和数字文本框输入的自定义模板。单击产品名称或金额将使文本框或数字文本框可见，更改文本框或数字文本框的值也会更新标签值，因为它指的是数据源上的相同内容。

首先，我通常使用 kendo observable as vm like

var vm = kendo.observable({
        dataSource: new kendo.data.DataSource({
            Id: "id",
            data: []
        }),
            act: function(){
            var data = [
            {id:1, productName: "Item A", amount: 1, isEditName: false, isEditAmount: false },
            {id:2, productName: "Item B", amount: 2, isEditName: false, isEditAmount: false },
          ];
           var  list = $("#list").data("kendoListView");
           list.dataSource.data(data);
           list.refresh();
        },
        toggleProductName : function(e){
            var editable = vm.dataSource.get($(e.currentTarget).attr("data-id")).isEditName;
          vm.dataSource.get($(e.currentTarget).attr("data-id")).set("isEditName",!editable);
        },
        toggleAmount: function(e){
           var editable = vm.dataSource.get($(e.currentTarget).attr("data-id")).isEditAmount;
          vm.dataSource.get($(e.currentTarget).attr("data-id")).set("isEditAmount",!editable);
        },      
    });

创建listView并将页面绑定到vm

$("#list").kendoListView({
      template: kendo.template($("#ItemTemplate").html()),
      autoBind: false,
      dataBound: function(e){ kendo.bind($("#list"),vm); },
      dataSource: vm.dataSource
   });



kendo.bind($("#example"),vm);

然后是 html :

<div id="example">
   <div id="list"></div>
   <button id="act" data-bind="click:act">Act now</button>
</div>

我的项目模板：

<script type="text/x-kendo-template" id="ItemTemplate">
  <tr>  
    <td role="gridcell" style="width:200px">
          <input type="text" name="NewAmount" data-bind="visible: dataSource.get(#=id#).isEditName, value: dataSource.get(#=id#).productName " style="width:100px"/>
        <label data-id="#=id#" data-bind="visible: dataSource.get(#=id#).isEditName, click: toggleProductName"> close </label>
        <label data-id="#=id#" data-bind="invisible: dataSource.get(#=id#).isEditName, click: toggleProductName, text: dataSource.get(#=id#).productName"> #= productName #</label> 
    </td>
    <td role="gridcell" style="width:200px">
        <input type="text" name="NewAmount" data-role="numerictextbox" 
         data-format="##.####" data-decimals="2" data-spinners="false" 
         min="0" max="100" style="width:100px"  data-bind="visible: dataSource.get(#=id#).isEditAmount, value: dataSource.get(#=id#).amount" />
         <label data-id="#=id#" data-bind="visible: dataSource.get(#=id#).isEditAmount, click: toggleAmount"> close </label>
        <label data-id="#=id#" data-bind="invisible:dataSource.get(#=id#).isEditAmount, click: toggleAmount, text: dataSource.get(#=id#).amount"></label> 
    </td>
  </tr>
  </script>

这里的主要内容是在数据绑定上再次将模板与 vm 绑定（因此它可以访问 vm 属性以及更新输入的值）
我将行绑定到数据源上的相应记录

这只是我的一个解决方法，我希望它也能帮助到你

带有 NumericTextBox 数据初始化的 ListView

ListView with NumericTextBox Data Initialization

javascript

templates

listview

telerik

kendo-ui