0

我有一个执行以下操作的视图:

  @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 的标签列表,但根据 Telerik 必须在后处理事件中使用它,这对我来说很好。

基本上遵循 Telerik 的建议,我需要将initCombo1:... initCombo2:... 等嵌入到 myko.applyBindings(vm)中,但正如您在上面的初始视图中看到的那样,它已经与预构建的 viewModel 一起使用。

如果我按照 Telerik 的要求做,它看起来像这样:

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

这对我来说看起来非常人为和不必要的混乱,我不确定它是否会起作用,因为它是从多个局部视图调用的......

哪位懂knockout的大神帮忙看看!如何正确而优雅地做到这一点,所以它最终会起作用

4

0 回答 0