Question

我正在使用knockoutJS，而且在使用pureComputed属性时遇到了一些问题。

这是我的模特

var LineItem = function() {
    var self = this;
    self.id = ko.observable('');
    self.name = ko.observable('');
    self.description = ko.observable('');
    self.unit_price = ko.observable('');
    self.quantity = ko.observable(1);
    self.amount = ko.pureComputed(function() {
        return self.unit_price() ? self.unit_price() * self.quantity() : 0;
    });
};

当我使用ko.mapping.toJS（LineItem）发布数据然后它工作，但是，当我从服务器获取数据（以json格式）并且我使用ko.mapping.fromJS（dataJSON）再次构建在视图模型中，它加载了金额字段，但它不是一个pureComputed值，因此当我更改数量值时，它不会更新。

如果使用knockoutJS映射插件从服务器检索字段，我怎样才能再次将字段设为pureComputed？

Answer 1

由于金额是api数据的一部分，因此您可以将pureComputed与金额分开：

this.amount = ko.observable(0);
this.amountComputed = ko.pureComputed(function() {
        return self.unit_price() ? self.unit_price() * self.quantity() : 0;
    });

如果这对你不起作用，你可以确保在调用fromJS后重新创建你的数量pureComputed。

Answer 2

解决！我使用了ko.mapping.fromJS的第二个参数（mapping）来重建我的LineItem视图模型，包括计算量。我不确定这是否是更好的方法，但它有效。

  var LineItem = function(data) {
        var self = this;
        self.id = ko.observable(data.id);
        self.name = ko.observable(data.name);
        self.description = ko.observable(data.description);
        self.unit_price = ko.observable(data.unit_price);
        self.quantity = ko.observable(data.quantity);
        self.amount = ko.pureComputed(function() {
           return self.unit_price() ? self.unit_price() * self.quantity() : 0;
        });
     };



var mapping = {
  'line_items': {
     create: function(options) {
        return new LineItem(options.data);
     }
  }

}

Answer 3

我用这个：

var unmapped = ko.mapping.toJS(self.Model);
var unmappedJSON = ko.toJSON(unmapped);
$.ajax({
    url: 'myUrl',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    data: unmappedJSON,
    success: function (data, textStatus, jqXHR) {

        var ignoreMapping =
        {
            'ignore': ["amount"]
        }


        ko.mapping.fromJS(data, ignoreMapping, self.Model);
    },
    error: function (jqXHR, textStatus, errorThrown) {
    ...
    }
});

使用 ignoreMapping ，插件会忽略此字段并保持可计算性。

使用映射插件

3 个答案: