asp.net-mvc - 複数の部分ビューの Knockout foreach ループ内の Kendo ComboBox

Question

次のことを行うビューがあります。

  @Html.EditorFor(e => e.Items1WithLabels) @* Call partial *@
  @Html.EditorFor(m => m.Items2WithLabels) @* Call partial *@
  @Html.EditorFor(m => m.Items3WithLabels) @* Call partial *@

@* more stuff *@

  <script type="text/javascript">

    $(function() {
      var data = @(Html.Raw(Json.Encode(@Model)));
      var vm = new viewModel(data); // created by js script
      ko.applyBindings(vm);

    });

        // validation and saving part (irrelevant)

  </script>

部分図は、モデル タイプのみが異なり、次のように表示されます。

Kendo ComboBox が適切にレンダリングされていなかったため、Telerik は後処理イベントを使用することを提案しました。

@model AppName.ViewModels.Items1WithLabels

<table>
    <tbody data-bind="foreach: {data: Items1, afterRender: initCombo1}">
    <tr>
        <td>
        <input type="text" class="combo"/>             
        </td>
        @* Much more stuff, but omitting for simplicity
    </tr>
    @* Much more stuff, but omitting for simplicity
    </tbody>
</table>

Items1 は viewModel に埋め込まれているため、vm.Items1 としてアクセスできます。また、vm.Item1Labels として ComboBox に入れる必要があるラベルのリストもありますが、テレリックによると、後処理イベントでそれを使用する必要があります。これは問題ありません。

基本的にテレリックのアドバイスに従って、initCombo1:... initCombo2:...などを myに埋め込む必要がありko.applyBindings(vm)ますが、最初のビューで上記のように、事前に構築されたviewModelで既に機能しています。

テレリックが要求することを行うと、次のようになります。

ko.applyBindings({
    Items1: vm.Items1,
    initCombo1: function (elements, item) {
        $(elements).find(".combo").kendoComboBox({
        dataSource: vm.Items1Labels,
        index: 3,
        placeholder: "Select ...",
        suggest: true
        });
    }
    Items2: vm.Items2,
    initCombo2: function (elements, item) {
        $(elements).find(".combo").kendoComboBox({
        dataSource: vm.Items2Labels,
        index: 1,
        placeholder: "Select ...",
        suggest: true
        });
    }
  });

これは非常に人工的で不必要に散らかっているように見えますが、複数の部分ビューから呼び出されるため、まったく機能するかどうかはわかりません...

ノックアウトに詳しい方、助けてください！それを正しくエレガントに行う方法と、最後に機能する方法