Шаблон KendoUI с наблюдаемым с помощью NumericTextbox

Question

У меня есть следующий шаблон KendoUI, связанный с наблюдаемым. Когда я нажимаю новый элемент на наблюдаемый массив, как применить кендоNumericTextBox только к новому элементу в шаблоне?

Если я применяю по классу, он имеет странный эффект удвоения вращающихся элементов в существующих числовых текстовых окнах.

<div id="slots"> 
     <table class="table table-striped table-condensed" style="width:auto;"> 
      <thead> 
       <tr> 
        <th>Date</th> 
        <th>Time</th> 
        <th>Volunteers Needed</th> 
        <th> 
         Reservation Passcode <i class="icon-question-sign" title ="Only people with the reservation passcode can signup."></i> 
        </th> 
       </tr> 
      </thead> 
      <tbody data-template="row-template" data-bind="source: slots"> 
      </tbody> 
     </table> 

    </div> 



$(document).ready(function() { 
      var viewModel = kendo.observable({ 
       slots: [{DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" }] 
       }); 
      kendo.bind($("#slots"), viewModel); 
      $(".numeric").kendoNumericTextBox({ 
       format: "n0" 
      }); 

      viewModel.slots.push({DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" }); 

      $(".numeric").kendoNumericTextBox({ 
       format: "n0" 
      }); 
}); 

Спасибо за любую помощь!

Answer 1

Попробуйте определение шаблона как:

<script type="text/x-kendo-tmpl" id="row-template"> 
    <tr> 
     <td>#= DateText #</td> 
     <td>#= ShiftLabel #</td> 
     <td class="numeric"><input data-role="numerictextbox" data-format="n0" data-bind="value: Slots"></td> 
     <td>#= ReservationCode #</td> 
    </tr> 
</script> 

и удалить $(".numeric").kendoNumericTextBox(...) инициализацию. При этом вы должны иметь NumericTextBox каждый раз при запуске шаблона (по одному на строку).

Ваш JavaScript, как это:

$(document).ready(function() { 
    var viewModel = kendo.observable({ 
     slots: [ 
      {DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 2, ReservationCode: "ABC" } 
     ] 
    }); 
    kendo.bind($("#slots"), viewModel); 

    viewModel.slots.push({DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 3, ReservationCode: "ABC" }); 
}); 

Смотреть это работает здесь http://jsfiddle.net/OnaBai/BV48W/

Почему: Тот факт, что вы используете класс CSS (.numeric) вызывает у вас в конечном итоге, KendoUI Numeric Текстовое поле внутри другого.

Пример: У вас есть следующий HTML:

<label>Number 1: <input id="number1" class="numeric"/></label> 
<label>Number 2: <input id="number2" class="numeric"/></label> 

И на JavaScript

$(document).ready(function() { 
    $(".numeric").kendoNumericTextBox({ 
     format: "n0" 
    }); 
    $(".numeric").kendoNumericTextBox({ 
     format: "n0" 
    }); 
}); 

Вы увидите, что вы назвали странный эффект удвоения блесны на существующих цифровых текстовых ,

Каждый раз, когда вы вызываете kendoNumericTextBox с помощью .numeric, вы можете добавить один дополнительный счетчик к элементу. Если у него нет счетчика (данные только добавлены в viewModel), он получает один , но, если вы добавите данные и вызовите kendoNumericTextBox, используя .numeric селектор, который предыдущий элемент получает другой.