3

テンプレートにあり、ViewModel にバインドされた kendoUI ドロップダウン リストと、ドロップダウン リストで選択されたデータ項目にバインドされたスパンがあります。

<p>
    <label>Appointment Type: </label>
    <select id="appointmentTypeDropDownList"
            data-text-field="Name"
            data-value-field="AppointmentTypeId"
            data-role="dropdownlist"
            data-bind="source:appointmentTypes, value:AppointmentTypeId"
            data-autobind="true"
            data-select="onSelected" />
</p>
<p><label>Duration:</label>
    <span data-bind="text:selectedAppointment.Duration"></span> minutes
</p>

私のビューモデル:

var viewModel = new kendo.observable({
    appointmentTypes: appointmentTypesDataSource,
    selectedAppointment : null,
});

もともと、私はアポイントメント タイプのハードコードされた配列を使用し、上記の viewModel 宣言で selectedAppointment をアポイント タイプ [0] に設定していました。データソースが非同期で読み込まれるため、現在は機能しません。viewModel は onSelected 関数で更新されます。

var onSelected = function (e) {
    var dataItem = this.dataItem(e.item.index());
    viewModel.set("selectedAppointment", dataItem);
};

テンプレートはウィンドウ内にあり、スパンは最初に読み込まれるときに空であり、その後 (最初の要求からデータが読み込まれると) 機能します。

私の質問は、スパンのデータ バインディングを最初の要求で機能させるにはどうすればよいでしょうか。これにより、データ ソースによって返されるリストから現在選択されているアポイントメント タイプの期間が表示されます。ドロップダウンリストの選択されたデータ項目にバインドしようとしますか? これを行うために使用する必要があるコールバックはどこかにありますか? それが重要な場合、テンプレートは kendoScheduler 内にあります。

var template = kendo.template($("#editor").html());

$("#scheduler").kendoScheduler({
    editable: {
        template: template()
    }
});

ありがとう！

更新:私が使用しているテンプレートは、ビューモデルにバインドされていない剣道 UI スケジューラのエディターですが、データソースにビューモデルの一部を使用していました。この場合、data-bind="events:{...}" 構文を使用しようとすると、奇妙な型エラーが発生していました。データバインド イベントを接続するには、Atanas から data-bound="onDataBound" とグローバル ハンドラー関数を使用するように指示されました (または、スケジューラを宣言的に構成してビューモデルにバインドすることもできます)。以下の回答と組み合わせてデータバインドを使用すると、うまくいきました。

4

2 に答える 2

4

dataBoundドロップダウンでイベントを使用してselectedAppointment、そこから設定できます。

data-bind="source:appointmentTypes, value:AppointmentTypeId, events: { dataBound: onDataBound }"

そしてあなたのビューモデル:

var viewModel = new kendo.observable({
    appointmentTypes: appointmentTypesDataSource,
    selectedAppointment : null,
    onDataBound: function(e) {
        e.sender.select(0); // will trigger your change handler
    }
});
于 2014-02-13T04:41:45.650 に答える
1

selectedAppointment の初期値を設定する必要があります。これは、データ ソースが設定される前にスパン テキストが設定される唯一の方法です。以下は、Northwind の製品に基づく実行可能なデモです。

<span data-bind="text:selectedProduct.ProductName"></span>
<select data-bind="source: products, value: selectedProduct"
      data-text-field="ProductName"
      data-value-field="ProductID"
      data-role="dropdownlist"></select>
<script>
var o = kendo.observable({
  selectedProduct: {
    ProductID: 2,
    ProductName: "Chang"
  },
  products: new kendo.data.DataSource({
    transport: {
      read: {
        url: "http://demos.telerik.com/kendo-ui/service/products",
        dataType: "jsonp"
      }
    }
  })
});

kendo.bind(document.body, o);
</script>

これがライブデモです: http://jsbin.com/pawiz/1/edit

于 2014-02-14T19:17:32.557 に答える