Knockout JS Mapping fromJS 嵌套模型答案

【问题标题】：Knockout JS Mapping fromJS nested modelsKnockout JS Mapping fromJS 嵌套模型
【发布时间】：2016-05-04 13:25:47
【问题描述】：

我无法理解如何使用 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，它实际上包含了之前保存的数量。但计算的没有显示。如何为嵌套的 observable（和 observablearrays）实现挖空映射插件的创建方法，这些模型是内部计算的模型。

P.S：我有 self.price.total 的原因是为了避免 toJS 也发送总密钥。我不能使用 ignore 忽略嵌套模型的属性：

更多信息请参见此主题：Knockout JS Mapping fromJS nested models

【问题讨论】：

到目前为止，我刚刚决定使用。这显然消除了对计算属性的需求，但我仍然对修复感兴趣，因为我不喜欢在 span 元素上发生该操作。

标签： javascript jquery rest knockout.js knockout-mapping-plugin

【解决方案1】：

您的 ajax 响应如何？它是退回整个购物车，还是只退回产品？

无论如何，如果您想将您的产品列表作为一个 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 可能是您正在寻找的东西，这种方法的唯一缺点，至少对我来说，是您需要定义一个映射配置对象对于代码中具有嵌套视图模型的每个视图模型

【讨论】：