ListView с NumericTextBox Data Initialization

Question

У меня есть ListView, что я связать вручную:

$("#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="" /> 

Как я могу инициализировать числовое текстовое поле в ListView?

Примечание: я не использую MVVM, поэтому я использовал kendo.bind("body") для первоначального подключения к пользовательскому интерфейсу, но не используя привязку данных для дополнительного подключения данных.

Answer 1

Я раньше работал над аналогичной проблемой, у меня есть dojo example, где у меня есть вид списка (вид) и пользовательский шаблон с отображением/спрячением текстового поля и ввода числового текстового поля. Нажмите «Имя продукта» или «Сумма», чтобы текстовое поле или числовой текст были видны, изменение текстового поля или значения numericTextbox также обновит значение метки, поскольку оно ссылается на одно и то же на источнике данных.

Прежде всего я хочу, как правило, работают с кендо различимым 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> 

My item Шаблон:

<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. Главное здесь в том, что снова связывании шаблон виртуальной машины на DataBound (так что он может получить доступ к свойствам ут, а также обновление значения от входа)
2. я связать строку с их соответствующими запись на DataSource

Это просто обходной путь для меня, я надеюсь, что это может помочь вам, как хорошо