Knockout嵌套Observable结合视图控制器：如何维护嵌套可观察对象？

我之前也踩过类似的Knockout嵌套Observable更新的坑——既要让ViewModel保持「纯数据表示」的低智能状态，只负责管理Observable，又要能接收来自服务或控制器的普通JSON数据，同时不丢失嵌套结构的响应式特性。你的props方法在处理扁平属性时没问题，但遇到address这种嵌套Observable就会失效，因为直接赋值普通对象会覆盖掉原来的嵌套Observable结构，确实很头疼。

下面给你几个亲测好用的方案，你可以根据自己的场景选择：

方案一：递归改进props方法，自动处理嵌套Observable #

最直接的方式就是让props方法具备递归更新的能力，判断每个属性的类型，针对性地更新：

var model = function() { 
  var self = this; 
  self.name = ko.observable(); 
  self.occupation= ko.observable(); 
  self.address = ko.observable({ 
    street: ko.observable('Streetname'), 
    zip: ko.observable('Zipcode') 
  }); 

  // 递归更新属性的工具函数
  var updateObservableProp = function(target, propKey, propValue) {
    // 先判断目标属性是不是Observable
    if (target[propKey] && ko.isObservable(target[propKey])) {
      var currentTargetValue = target[propKey]();
      // 如果当前Observable的值是一个包含Observable的对象（非数组），递归更新嵌套属性
      if (typeof currentTargetValue === 'object' && currentTargetValue !== null && !Array.isArray(currentTargetValue)) {
        for (var nestedKey in propValue) {
          updateObservableProp(currentTargetValue, nestedKey, propValue[nestedKey]);
        }
      } else {
        // 普通Observable直接赋值
        target[propKey](propValue);
      }
    }
  };

  self.props = function(data) { 
    for (var p in data) { 
      updateObservableProp(self, p, data[p]);
    } 
  }; 

  self.doUpdate = function() { 
    self.props({name: 'Tom', address: {street:'NewStreet'}}); 
  }; 
} 
ko.applyBindings(new model());

这个方案的好处是不需要额外依赖，逻辑集中在props方法里，调用方式完全不变。当你传入address: {street:'NewStreet'}时，它会找到self.address()里的street Observable并更新，而不是把整个address Observable替换成普通对象。

方案二：用Knockout Mapping插件的自定义规则，优雅复用现有Observable #

如果你已经打算用Knockout Mapping，可以不用mapping_前缀这种略显笨拙的方式，而是提前为嵌套结构定义映射规则，复用已有的Observable对象：

var model = function() { 
  var self = this; 
  self.name = ko.observable(); 
  self.occupation= ko.observable(); 
  self.address = ko.observable({ 
    street: ko.observable('Streetname'), 
    zip: ko.observable('Zipcode') 
  }); 

  // 为address定义自定义映射规则：复用已有嵌套对象，而不是新建
  var addressMappingConfig = {
    create: function(options) {
      var existingAddress = self.address();
      if (existingAddress) {
        // 用传入的普通数据更新已有嵌套Observable
        ko.mapping.fromJS(options.data, {}, existingAddress);
        return existingAddress;
      }
      // 如果是第一次初始化，再新建
      return ko.mapping.fromJS(options.data);
    }
  };

  self.props = function(data) { 
    // 扁平属性直接更新
    if (data.name) self.name(data.name);
    if (data.occupation) self.occupation(data.occupation);
    // 嵌套属性用自定义映射规则更新
    if (data.address) {
      ko.mapping.fromJS(data.address, addressMappingConfig, self.address());
    }
  }; 

  self.doUpdate = function() { 
    self.props({name: 'Tom', address: {street:'NewStreet'}}); 
  }; 
} 
ko.applyBindings(new model());

这种方式的优势是Mapping插件会自动帮你处理嵌套结构的映射，你只需要告诉它要复用已有的对象，避免了手动递归的代码，适合嵌套层级多、结构复杂的场景。

方案三：把嵌套结构抽成独立ViewModel，职责更清晰 #

如果你的嵌套结构（比如address）以后可能会扩展更多属性或逻辑，把它抽成独立的ViewModel是最模块化的选择：

// 子ViewModel：地址模型
var AddressViewModel = function() {
  var self = this;
  self.street = ko.observable('Streetname');
  self.zip = ko.observable('Zipcode');

  // 子ViewModel自己的props方法，负责更新自身属性
  self.props = function(data) {
    if (data.street) self.street(data.street);
    if (data.zip) self.zip(data.zip);
  };
};

// 父ViewModel
var model = function() { 
  var self = this; 
  self.name = ko.observable(); 
  self.occupation= ko.observable(); 
  self.address = ko.observable(new AddressViewModel()); 

  self.props = function(data) { 
    if (data.name) self.name(data.name);
    if (data.occupation) self.occupation(data.occupation);
    // 调用子ViewModel的props方法更新嵌套数据
    if (data.address) self.address().props(data.address);
  }; 

  self.doUpdate = function() { 
    self.props({name: 'Tom', address: {street:'NewStreet'}}); 
  }; 
} 
ko.applyBindings(new model());

这个方案让每个ViewModel的职责更单一，父ViewModel只需要调用子ViewModel的更新方法，以后修改address的结构或更新逻辑，只需要改动AddressViewModel，不会影响父ViewModel，扩展性和可维护性都更好。

内容的提问来源于stack exchange，提问作者monkeydeus