我正在尝试使用 knockoutjs 做一个简单的级联组合框。我的第一个组合框绑定到视图模型中的 2 个属性:
BusinessLines作为组合框选项的来源
SelectedBusinessLine作为第一个组合框中的选定项。
每个 BusinessLine 都有一个集群集合。
第二个组合框应该数据绑定到 SelectedBusinessLine.Clusters 可观察组合框选项源,以及 SelectedCluster 用于选定选项。
问题是第二个组合框根本没有被填充。
JsFiddle 中的源代码(在JsFiddle中,第一个绑定也不起作用,抱歉第一次使用)
JavaScript
var mainViewModel = null;
$(document).ready(function() {
var mainViewModelData = <%= JsonConvert.SerializeObject(NewRequestViewModel) %>;
mainViewModel = ko.mapping.fromJS(mainViewModelData);
ko.applyBindings(mainViewModel);
});
HTML
<div>
<table>
<tr>
<td>
Business Line
</td>
<td>
<select data-bind="options: BusinessLines,
optionsText: 'Title',
value: SelectedBusinessLine,
optionsCaption: 'Select Business Line..'">
</select>
</td>
</tr>
<tr>
<td>
Cluster
</td>
<td>
<select data-bind="options: SelectedBusinessLine.Clusters,
optionsText: 'Title',
value: SelectedCluster,
optionsCaption: 'Select Cluster..'">
</select>
</td>
</tr>
</table>
</div>
更新:
第二种解决方案(没有计算道具)
<select data-bind="options: SelectedBusinessLine() ? SelectedBusinessLine().Clusters() : [],
optionsText: 'Title',
value: SelectedCluster,
optionsCaption: 'Select Cluster..'">
</select>