Knockout.js 在一个 ViewModel 中绑定多个 ObservableArrays 的最佳实践答案

【问题标题】：Knockout.js Best Practice for binding Multiple ObservableArrays in one ViewModelKnockout.js 在一个 ViewModel 中绑定多个 ObservableArrays 的最佳实践
【发布时间】：2014-09-13 21:15:53
【问题描述】：

我是相当新的 Knockout.js，但我已经成功地将一些与简单 WebAPI 服务交互的 CRUD 模板组合在一起。现在我想转向更复杂的结构，但我已经遇到了一个相当常见的情况：单个 html 表单上有多个下拉列表。

我知道我可以构建这样的 ViewModel：

function myViewModel() {
    var self = this;

    self.selectedCustomer = ko.observable();
    self.customers = ko.observableArray([]);

    self.selectedState = ko.observable();
    self.states = ko.observableArray([]);

    self.selectedProduct = ko.observable();
    self.products = ko.observableArray([]);
}

然后我会将每个选择列表绑定到相应的属性。虽然这应该可行，但我觉得有更好的方法来处理它。我曾考虑将每个列表分解为它自己的 ViewModel，但这似乎有点过头了。我想尽早养成良好的 MVVM 习惯，并希望使用这些新技术重建旧系统，所以任何方向都会很棒。

【问题讨论】：

标签： javascript mvvm knockout.js

【解决方案1】：

实际上，您正在寻找的内容现在在 knockoutjs 版本 3.2.0 中称为 Component。要理解这一点，您可以查看 knockoutjs 创始人 Steve Anderson 的演示文稿。

Architecting large Single Page Applications with Knockout.js

此演示文稿告诉我们创建一个基于两件事的组件。

视图模型
模板

那么有两种使用方式。

1.HTML标签方式。示例<name-editor></name-editor>
2 使用组件绑定<div data-bind="component: 'name-editor'"></div>

要记住的一点是，组件将是完全独立的，您可以在页面上调用任意数量的组件实例，并且每个实例都将独立工作。

这里有两个教程将引导您走向正确的道路。

Knockout.js 3.2 Preview : Components

Dipping your feet into KnockoutJS Components

【讨论】：

这看起来是一条很好的探索之路。所以在这种情况下，每个组件都将充当一个迷你虚拟机，其中包含每个组件的相关属性。这可能会被扩展（如果还没有的话）为选择列表组件提供一个通用 VM，您可以在其中传递可观察对象，并且组件将其全部链接起来。谢谢！