KnockoutJS 和属性相关的创建/编辑视图（主/详细方案）答案

【问题标题】：KnockoutJS and Property-Dependent Create/Edit-View (Master/Detail Scenario)KnockoutJS 和属性相关的创建/编辑视图（主/详细方案）
【发布时间】：2013-09-14 07:24:52
【问题描述】：

我在 KnockoutJS 中创建依赖于属性的创建/编辑视图时遇到问题。

事情是这样的：我创造的一切都是“人”——可能是医疗保健专业人员、水管工、机械师或工程师。根据人的种类/类型，我需要输入不同的数据。

这里是一个例子：

Healthcare Professional: Name, Telephone, Hospital, etc.
Plumber: Name, Telephone, Crafts, etc.
Engineer: Name, Telephone, Specialities, etc.

我可以做的是在我的 ViewModel 上创建属性，例如“showCity”、“showHospital”等，以隐藏各个表单字段。

但是，为了区分，我想使用完全不同的表单：同样，我可以将相应的表单设置为仅在满足条件时显示。

但是，我希望 KnockoutJS 仅呈现应使用的相应表单（Person 的类型始终在首次创建时确定 - 它无法更改）。

我最终没有做的是显示一种形式，而另一种形式存在（和数据绑定）但隐藏。

我尝试像这样使用“if”绑定：<div data-bind="with: $root.selectedPerson"><form data-bind="if: $data.type='mathematician'"></form></div>，但无济于事。

有人知道这种情况下的最佳做法是什么吗？

【问题讨论】：

我会尝试查看模板化表格。因此，每种类型的人都有一个特定的模板，您可以在需要时渲染它
感谢您的回复。但是，这会让我回到我的“仅显示需要的表单”解决方案（可见：$data.isEngineer）。我正在寻找一种仅呈现所需表单的解决方案。否则，我最终会在 DOM 中得到大量数据绑定、未使用的表单。
好吧，它们并不完全位于 DOM 中，而是位于脚本标签中。在您的 People 类中，您将定义要使用的模板，然后在您的视图中，将执行类似 <div data-bind="template: { name: yourTemplateProperty, data: buyer }"></div> 的操作
@JDR，无论你如何分割它，你要么在页面上有多个模板，要么在多个表单上使用if 绑定来确定是否应该呈现内部 html。 if 绑定很棒，但它带来了一些必须从 DOM 添加/删除表单的成本。 visible 绑定可能会更好，因为它只是显示/隐藏它。我认为模板将是@Thewads 建议的最佳解决方案。
是的，我现在也开始意识到这一点。我没有想到动态绑定模板，但在我的情况下这听起来像是理想的解决方案。因此，为 Thewads 竖起大拇指。 :)

标签： mvvm knockout.js knockout-2.0 master-detail

【解决方案1】：

您的if 绑定正在设置$data.type 值，而不是比较它。试试：

<div data-bind="with: $root.selectedPerson"><form data-bind="if: $data.type() === 'mathematician'"></form></div>

虽然这很好，但我总是尽量避免在我的数据绑定标记中使用代码。我会尝试创建一个计算结果，它会返回比较结果的真/假，但在您的情况下，您需要为每种类型的人创建一个，这会变得很棘手。为此，我会求助于templates。你可以这样做：

<div data-bind="template: { name: $root.selectedPerson().type, data: $root.selectedPerson }"></div>
<script type="text/html" id="mathematician">...</script>
<script type="text/html" id="plumber">...</script>

*注意：从 KO 版本 2.3.0 开始，template 绑定的 name 属性可以接受 observables。如果您使用的是以前的版本，请务必在绑定中调用 observable：name: $root.selectedPerson().type()

【讨论】：

基于模板的解决方案现在看起来很理想，因为我看到了它的实际效果。这很有魅力，感谢您的详细解释（也关于 v2.3）。 :-)