ListView与NumericTextBox数据初始化

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示例，其中我有一个列表视图(某种)和自定义模板，其中包含显示/隐藏文本框和数字文本框输入。单击“产品名称”或“金额”将使textbox或numericTextbox可见，更改textbox或numericTextbox值也将更新标签值，因为它引用dataSource上的相同内容。

首先，我通常使用kendo，可以观察到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>

1. 这里的主要内容是在数据库上再次将模板与vm绑定(这样它就可以访问vm属性以及更新输入的值)。
2. 我将该行绑定到它们各自在dataSource上的记录

这只是我的一个解决办法，我希望它也能对你有所帮助。