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我有一个列表视图（种类）和自定义模板，显示/隐藏文本框和数字文本框输入。单击Product Name或Amount将使textbox或numericTextbox可见，更改textbox或numericTextbox值也将更新标签值，因为它引用dataSource上的相同内容。

首先，我通常使用kendo observable作为vm

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属性以及从输入中更新值）
我将行绑定到dataSource上的相应记录

这对我来说只是一种解决方法，我希望它也能为你提供帮助

带有NumericTextBox数据初始化的ListView

1 个答案: