在多个局部视图中Knockout foreach循环内部的Kendo ComboBox

时间:2013-04-24 13:42:20

标签: asp.net-mvc knockout.js kendo-ui knockout-2.0 knockout-mvc

我的观点如下:

  @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 suggested我使用了后处理事件。

@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: ...等嵌入我的ko.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
        });
    }
  });

这看起来很人性化,不必要的混乱我,我不确定它会起作用,因为它是从多个部分视图调用的......

任何知道淘汰赛的人都很好,请帮忙!如何做到正确和优雅,所以它将在最后工作

0 个答案:

没有答案