在 Knockout JS 中触发子属性的订阅事件答案

【问题标题】：Triggering subscribe event for children properties in Knockout JS在 Knockout JS 中触发子属性的订阅事件
【发布时间】：2014-10-10 17:46:09
【问题描述】：

我在触发 Knockout 中的订阅事件时遇到了一些问题。我有一个模式数组，每个模式都有很多天。我想在一天的时间戳发生变化时触发我的订阅事件，而不仅仅是在架构数组发生变化时。

到目前为止，这是我的代码。当从 Schemas 数组中添加或删除 Schema 时，底部的 subscribe 事件会触发。但当任何子属性发生变化时不会。

{"schemas":[
    {"days":[
        {"from":"12:00","to":"17:00"},
        {"from":"06:30","to":"17:00"},
        {"from":"06:30","to":"17:00"},
        ...
    ]},
    {"days":[
        {"from":"06:30","to":"17:00"},
        {"from":"06:30","to":"17:00"},
        {"from":"06:30","to":"17:00"},
        ...
    ]}
]} 

var Schema = function(data, parent, index) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
};

var SchemaViewModelMapping = new (function() {
    var self = this;

    self.index = 0;
    self.schemas = {
        create: function(options) {
            self.index++;
            return new Schema(options.data, options.parent, self.index);
        }
    };
    self.index = 0;
})();


var SchemaViewModel = function() {
    ko.mapping.fromJS(data, SchemaViewModelMapping, self);

    self.schemas.subscribe(function(value) {
        **Let me do something when a DAY changes here!!!**
    });
}

var ViewModel = new SchemaViewModel;
ko.applyBindings(ViewModel);

【问题讨论】：

schemas observable 不知道数组内容的内部结构——只知道数组本身中的项。要执行您的建议，您需要将数组中每个项目的每个属性设置为 observable 或 observableArray 并订阅这些以查看任何更改
谢谢.. 这很有道理。我能够解决它。
请将其添加为答案，并将其标记为有效答案以帮助其他人。
当然.. @JamesThorpe 随意添加它，我会接受它为有效的。如果没有，我稍后会添加我自己。
@Stromgren 添加它可能会更好，因为您可以包含您编写的实际代码以绑定到您的子属性等。我只是提出一个建议:)

标签： javascript knockout.js

【解决方案1】：

根据@JamesThorpe 的建议，我将代码更新如下：
我添加了一个新的 Day 对象，从中添加我的订阅，我从 Schema 实例化它。

{"schemas":[
    {"days":[
        {"from":"12:00","to":"17:00"},
        {"from":"06:30","to":"17:00"},
        {"from":"06:30","to":"17:00"},
        ...
    ]},
    {"days":[
        {"from":"06:30","to":"17:00"},
        {"from":"06:30","to":"17:00"},
        {"from":"06:30","to":"17:00"},
        ...
    ]}
]} 

var Day = function(data) {
    var self = this;
    self.from = ko.observable(data.from);
    self.to = ko.observable(data.to);
    self.from.subscribe(function() {
        **Doing my subscribe magic...**
    });
    self.to.subscribe(function() {
        **Doing my subscribe magic...**
    });
};

var Schema = function(data, parent, index) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
    self.days = ko.observableArray();
    data.days.forEach(function(day) {
      self.days.push(new Day(day));
    });
};

var SchemaViewModelMapping = new (function() {
    var self = this;

    self.index = 0;
    self.schemas = {
        create: function(options) {
            self.index++;
            return new Schema(options.data, options.parent, self.index);
        }
    };
    self.index = 0;
})();


var SchemaViewModel = function() {
    ko.mapping.fromJS(data, SchemaViewModelMapping, self);

    self.schemas.subscribe(function(value) {
        **Let me do something when a DAY changes here!!!**
    });
}

var ViewModel = new SchemaViewModel;
ko.applyBindings(ViewModel);

【讨论】：