javascript - ListView 与 NumericTextBox 数据初始化

Question

我有一个手动绑定(bind)的 ListView :

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

最初我绑定(bind)列表，然后加载一些数据:

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

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

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

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

如何初始化 ListView 中的数字文本框？

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

Answer 1

我以前处理过类似的问题，我有一个 dojo example我有一个 ListView (某种)和带有显示/隐藏文本框和数字文本框输入的自定义模板。单击产品名称或金额将使文本框或数字文本框可见，更改文本框或数字文本框值也会更新标签值，因为它引用数据源上的相同内容。

首先，我通常使用 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并将页面绑定(bind)到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. 这里的主要事情是在数据绑定(bind)上再次将模板与虚拟机绑定(bind)(这样它就可以访问虚拟机属性并更新输入中的值)
2. 我将行绑定(bind)到数据源上各自的记录

这只是我的一个解决方法，希望对您也有帮助