Question

我在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>，但无济于事。

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

Answer 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开始，name绑定的template属性可以接受observable。如果您使用的是先前版本，请务必在绑定中调用observable：name: $root.selectedPerson().type()

KnockoutJS和依赖于属性的创建/编辑视图（主/细节场景）

1 个答案: