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

我对Knockout.js相当陌生，但我已经成功地整合了一些CRUD模板，这些模板与一个简单的WebAPI服务交互。现在我想继续讨论更复杂的结构，我已经被一个相当常见的情况绊倒了：一个html表单上有多个下拉列表

我知道我可以构建这样的视图模型：

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([]);
}

---

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

实际上，您正在寻找的是knockoutjs 3.2.0版中的

组件。要了解这一点，您可以看到knockoutjs创始人Steve Anderson的演示


本演示告诉我们创建一个基于两件事的组件

视图模型
模板
然后有两种方法来使用它

1.HTML标记方式。示例


2使用组件绑定

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

这里有两个教程将引导您找到正确的方向


这似乎是一条很好的探索之路。因此，在本例中，每个组件都将充当一个迷你VM，其中包含每个组件的相关属性。这可能会被扩展（如果还没有的话）为select list组件提供一个通用的VM，您可以在其中传入可观察对象，组件将其链接起来。谢谢