javascript - 在一个 ViewModel 中绑定(bind)多个 ObservableArrays 的 Knockout.js 最佳实践

Question

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

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

Answer 1

实际上你要找的现在叫Component在 knockoutjs 版本 3.2.0 中。要了解这一点，您可以查看 knockoutjs 创始人 Steve Anderson 的演讲。

Architecting large Single Page Applications with Knockout.js

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

1. View 模型
2. 模板

那么有两种使用方式。

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

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

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

Knockout.js 3.2 Preview : Components

Dipping your feet into KnockoutJS Components