Knockout 订阅 observable 对象答案

【问题标题】：Knockout subscribe to observable objectKnockout 订阅 observable 对象
【发布时间】：2013-04-17 08:02:18
【问题描述】：

我有一个对象：

{ model: settings: { "FirstName": "Joe", "LastName": "Bloggs" } };

在我的视图模型中，我将设置设为可观察：

this.Settings = ko.observable(ko.mapping.fromJS(model.settings));

这也使FirstName 和LastName 成为可观察对象。

在我看来，我通过以下方式进行绑定：

<p data-bind="text: Settings().FirstName"></p>

从Settings 读取值我这样做：

`this.Settings().FirstName()`

当FirstName或LastName更改时，我想订阅时出现问题。

我知道我可以做到this.Settings.FirstName.subscribe...，但是一旦你观察到两个以上的东西，那会很痛苦。

有没有办法做到this.Settings.subscribe...？还是我应该使用自定义绑定？

【问题讨论】：

【解决方案1】：

我写了下面的插件来帮助我处理这种情况：

这是一个简单的用法示例：

 this.Settings.watch(function(root, trigger){
     var newValue = trigger();
 });

【讨论】：

【解决方案2】：

通过使用计算的可观察对象，您可以在任何这些依赖项发生变化时自动更新。例如，当 Firstname 或 LastName 更改时，FullName 将得到更新。

 this.Settings().FullName =  ko.computed(function() {
    return this.Settings().FirstName() + " " + this.Settings().LastName();
});

注意：我会多做一些工作以使视图模型更简洁。

【讨论】：

是的，谢谢。但我试图找到一种订阅更改而不列出所有子属性的方法，因为 Settings 对象有大约 20-30 个子属性。列出每个子属性时会非常痛苦。此外，如果您删除/重命名子属性，一切都会中断，所以如果您可以从父级别订阅，那将是理想的:)
您的问题中没有提到这一点。无论如何，您可以像 Ryan 为dirtyFlag 所做的那样做一些自定义绑定（链接如下）。这个概念是将对象的初始状态（映射之前）与对象的当前状态（通过转换为 JSON）进行比较。如果这不能解决您的问题，请告诉我。 knockmeout.net/2011/05/…

【解决方案3】：

您应该尝试mapping plugin，它可以让您获取纯 JSON 对象并将它们转换为完整视图模型。

基本上它将每个对象上的每个成员都转换为可观察对象：

var data = { "FirstName": "Joe", "LastName": "Bloggs" };
var viewModel = ko.mapping.fromJS(data);

然后你可以将这个视图模型绑定到你的 html 中，像这样直接绑定属性：

<p data-bind="text: FirstName"></p>

这是一个小例子，我只映射了一个普通对象，但如果您想转换示例中的嵌套对象，您也可以实现更复杂的映射。文档中有更多相关信息。

【讨论】：