我有一个执行以下操作的视图:
@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的大神帮忙看看!如何正确而优雅地做到这一点,所以它最终会起作用