淘汰赛 - 根据选择/下拉选择更新 UI（过滤数据）？答案

【问题标题】：knockout - update UI (filter data) based on select/dropdown choice?淘汰赛 - 根据选择/下拉选择更新 UI（过滤数据）？
【发布时间】：2012-09-19 19:55:55
【问题描述】：

如何根据选择/下拉菜单中的选择更新此 UI？

例如，如果我从选择/下拉列表中选择一个成员名称，我希望表格更新/过滤以仅显示那些成员行（成员名称在最右列）及其相应的日期标题（灰色背景)。

如果我从选择/下拉菜单中选择提供者名称），我希望表格更新/过滤以仅显示那些提供者行（左列中的提供者名称）及其相应的日期标题（灰色背景）。

我正在使用 KO 映射插件。虚拟数据是硬编码的，最终会通过 ajax 返回。

这里是所有代码的一小部分（它们都只是内联在 HTML 窗格中）。如果需要，您也可以复制/粘贴它并在本地运行它。

非常感谢任何帮助/指导！

【问题讨论】：

【解决方案1】：

我的建议是使用 eob 级别的 computed 值返回过滤后的数组。要在 mapping 过程中添加此计算值，您必须使用映射选项参数中的 create 回调自定义 eob 对象创建（参见 @ 987654321@)

这里是更新后的fiddle 以查看它的实际效果。

别忘了再添加 2 个 observable 来捕获 2 个 select 元素的当前值。计算值将取决于这 2 个 observables。

注意：提供的小提琴不会在 IE 上运行，因为 github 位于 mapping javascript 不返回 IE 所需的 content-type 标头。

【讨论】：

太棒了，现在开始深入研究......如果灰色的行标题没有孩子，我该如何排除它们？例如，如果您按成员 George Washington 进行过滤，您会看到一大串没有任何子/数据的灰色日期。
哇，我看到你可以打破这个并将这一切都链接到 jsfiddle 上。我可以发誓，就在几周前，它不会让我链接到 raw.github 以进行 ko.mapping。有没有我错过的技巧？我试着像你一样做，通过最左边的管理资源面板链接。
只是添加另一个 computed 函数 (eobsFiltered) 更高一级（在 viewModel 对象处）并检查 eobsClaim 数组是否包含选定的元素。
IE 阻止来自 github 的链接，因为缺少内容类型标头。大概这就是原因。尝试使用其他浏览器。我正在使用 chrome。
我使用的是 Firefox，但它似乎没有运行，虽然我现在在 FF 并且你的小提琴有效。