Knockout JS绑定到对象属性

Question

我需要将一些HTML绑定到一个对象，但问题是在开发时我不知道该对象的属性。

我在主视图模型中有一个selectedItem属性，我已经将它绑定到了HTML的某个部分：

<div data-bind="with: selectedItem">

</div>

现在我想根据属性名称和属性值生成一张表格：

<div data-bind="foreach: [WHAT DO I PUT HERE?]">
    <label class="control-label"><span data-bind="text: [OR HERE?]" /></label>
</div>

我真的不知道该怎么做。非常感谢您的帮助。

此外，稍微扩展一下，我想以不同的方式处理绑定对象的属性，例如，如果属性只是一个原始类型，只需输出它，但如果它是另一个对象/数组，则需要特殊处理。

这可以实现吗？

- Mark

Answer 1

如果其他人想要绑定一个简单对象的属性，可以这样做...

<table>
    <tbody data-bind="foreach: arrayOfObjects">
        <tr data-bind="foreach: Object.keys($data)">
            <td data-bind="text: $parent[$data]"></td>
        </tr>
    </tbody>
</table>

注意：在旧版浏览器中不支持 Object.keys，但您可以使用以下方法以实现向后兼容性：http://whattheheadsaid.com/2010/10/a-safer-object-keys-compatibility-implementation

- Dean North

Answer 2

这里是一个工作示例，使用计算可观察在运行时选择要显示的数据。根据要呈现的数据类型（数组或标量），还使用动态选择模板来呈现数据。

- gbs

---

这是一个不错的开始，但我并没有看到如何在设计时访问我不知道的视图模型属性。您能否详细说明一下？ - Mark

当然。属性“selected”包含要在视图模型中选择的属性名称（可以在运行时更改）。更改此值（可观察到的）将触发属性“data”（计算可观察到的）的更新。最后一个属性动态地选择（参见_self [selection]_）要使用相应模板呈现的数据（list1或item1）。希望这澄清了这个例子。 - gbs

啊，我明白你的意思了，谢谢。但也许我误解了你的想法，或者我没有描述问题得足够清楚。如果 Model 类有 X 个属性（在你的例子中是 2 个，但我的大约有 20 个），我想列出所有属性并根据该属性的类型选择模板。在你的例子中，你已经在选择列表中硬编码了属性，而我不知道它们...这样说你能理解吗？ - Mark

选择列表只是为了举例而已。您可以通过其他方式完全更改属性_selected_的值。我用两个属性做了一个示例，但您也可以有很多个属性。要选择正确的属性进行显示，请将其名称放入_selected_属性中，模板将根据类型自动选择。在您的情况下，您将如何选择要显示的属性？ - gbs

我现在想我明白你的意思了。这个示例是你要找的东西吗？ - gbs