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

标签 javascript mvvm knockout.js

我是 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 习惯,并希望使用这些新技术重建旧系统,所以任何方向都会很好。

最佳答案

实际上你要找的现在叫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

关于javascript - 在一个 ViewModel 中绑定(bind)多个 ObservableArrays 的 Knockout.js 最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24897754/

相关文章:

javascript - 在cordova中使用chrome View 而不是默认的webview

data-binding - 根据 ViewModel 的属性在 View 中的 UserControl 之间切换

Knockout.js 点击绑定(bind)参数

javascript - 以字符串形式获取属性名称而不是属性值?

javascript - 根据 Knockout.js 中的复选框绑定(bind) future 的日期选择器最大日期

javascript - CSS - 使可拖动的自定义列表项响应

javascript - 使用jquery单击按钮上的slidetoggle div容器

javascript - 使用 JQuery 设置输入值并不总是有效

c# - WPF DataGrid中的“Invalid” datetime

java - Android MVVM/Repository 如何强制 LiveData 从存储库更新?