0

次の KendoUI テンプレートをオブザーバブルにバインドしています。オブザーバブル配列に新しいアイテムをプッシュする場合、テンプレート内の新しいアイテムのみに kendoNumericTextBox を適用するにはどうすればよいですか?

クラスごとに適用すると、既存の数値テキスト ボックスのスピナーが 2 倍になるという奇妙な効果があります。 

<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"
          });  
 });

助けてくれてありがとう！

4

1 に答える 1

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、テンプレートが実行されるたびに (行ごとに 1 つ) が必要になります。

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 Text Box が別のクラス内に配置されることになります。

例: 次の 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"
    });
});

既存の数値テキスト ボックスでスピナーを 2 倍にするという奇妙な効果と呼ばれるものが表示されます。

kendoNumericTextBoxセレクターを使用して呼び出すたび.numericに、要素にスピナーを 1 つ追加します。スピナーがない場合 (データが に追加されたばかりviewModel) はスピナーを取得しますが、データを追加してセレクターをkendoNumericTextBox使用して呼び出すと、前の要素が別の要素を取得します。.numeric

于 2013-03-05T23:08:16.847 に答える