javascript - 从 JS 嵌套模型中 knockout JS 映射

Question

我无法理解如何使用 Knockout JS 映射插件。我有一些嵌套模型(如下所示)，我当前所做的只是在父模型中使用 ko.mapping.fromJS() 。我注意到计算值没有被...计算。

我试图理解“创建”:

var mapping = {
    'children': {
        create: function(options) {
            return new myChildModel(options.data);
        }
    }
}
var viewModel = ko.mapping.fromJS(data, mapping);

但现在在我当前的情况下，我不确定如何实现。

当前结构:

var ProductModel = function($name, $price, $quantity) {
    var self = this;

    self.id = ko.observable();
    self.name = ko.observable($name);
    self.quantity = ko.observable($quantity);
    self.price = ko.observable($price);
    self.price.total = ko.computed(function() {
        return self.price() * self.quantity();
    });
};


var CartModel =  function (){
   var self = this;

   // Model Properties
   self.id = ko.observable();   
   self.products = ko.observableArray();   

    self.fetch = function() {
        $.ajax({
            url: "route to get the specific cart",
            type: "GET",
            success: function(data) {                
                ko.mapping.fromJS(data, {}, self);
            }
        });
    };   

    // Convert to mapping format
    ko.mapping.fromJS(ko.mapping.toJS(self));
};

var ViewModel = ko.validatedObservable(new CartModel());
ko.applyBindings(new ViewModel());

我不确定如何让 ProductModel 触发 ProductModel 内部的计算，我不确定是否必须在每个模型中调用 ko.mapping.fromJS (我有更多模型，我将它们剥离出来以使其更简单)。

在获取函数之后，我向 products().length 发出警报，它实际上包含之前保存的数量。但计算的结果没有显示。如何为嵌套的可观察对象(和可观察数组)实现 knockout 映射插件的创建方法，这些可观察对象是内部计算的模型。

P.S:我拥有 self.price.total 的原因是为了避免 toJS 也发送总 key 。我无法使用ignore忽略嵌套模型的属性:

请参阅此帖子了解更多信息:Knockout JS Mapping fromJS nested models

Answer 1

你的ajax响应是什么样的？它返回整个购物车，还是只返回产品？

无论如何，如果你想将产品列表作为 View 模型的 observableArray 来处理，你可以这样做:

ko.utils.arrayForEach(products, function(item, index) {
  self.products.push(new ProductModel(item.name, item.price, item.qty);
});

如果你想使用映射插件，我还没有自定义实现“create”方法，但我会这样做:

var ProductModel = function(product) {
  var self = this;

  ko.mapping.fromJS(product, {}, self);

  self.total = ko.computed(function() {
      return self.price() * self.quantity();
  });
};

编辑

我重新阅读了你的问题，我认为this answer可能就是您正在寻找的，该方法的唯一缺点(至少对我而言)是，您需要为代码中具有嵌套 View 模型的每个 View 模型定义一个映射配置对象