将新的 Observable 添加到 ko.mapping.fromJS 映射的 ObservableArray

Question

我正在尝试向 ObservableArray 添加一个新的 Observable，该 ObservableArray 最初是使用 KO 的映射插件映射的。但我没有得到那个工作。 Firebug 告诉我 "TypeError: totalChf is not a function"。查看添加的 Observable，我注意到未创建 Computed 函数。我尝试了几种方法，仍然没有成功......我错过了什么？

提前致谢

这里是代码：

var vm;
var ClientsMapping = {
  create: function (options) {
    var client = ko.mapping.fromJS(options.data, ContainersMapping)
    //Some computed observables for level one here...
    return client;
  }
}
var ContainersMapping = {
  'Containers': {
    create: function (options) {
      var container = ko.mapping.fromJS(options.data, MoneyAccountsMapping)
      container.totalChf = ko.computed(function () {
        var total = 0;
        $.each(container.MoneyAccounts(), function () {
          if (this.Currency() == "CHF") {
            total += this.Amount();
          }
        })
        return total;
      })
      //Some computed observables for level two here...
      return container;
    }
  }
}

var MoneyAccountsMapping = {
  'MoneyAccounts': {
    create: function (options) {
      var macc = new MoneyAccountModel(options.data)
      //Some computed observables for level three here...
      return macc;
    }
  }
}
var ClientModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
}
var ContainerModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
}
var MoneyAccountModel = function (data) {
  ko.mapping.fromJS(data, {}, this);
}
var data = [
  {
    'Clients': 'Thomas',
    'Containers': [
      {
        'ContName': 'Cont01',
        'MoneyAccounts': [
          { Currency: "CHF", Amount: 1000 },
        ]
      }
    ]
  },
{
  'Clients': 'Ann',
  'Containers': [
    {
      'ContName': 'Cont01',
      'MoneyAccounts': [
        { Currency: 'CHF', Amount: 1000 },
        { Currency: 'EUR', Amount: 500 }
      ]
    }
  ]
}
]

function viewModel() {
  var self = this;
  self.clients = ko.observableArray()
  self.clientsCount = ko.computed(function () {
    return self.clients().length
  })
}
$(function () {
  vm = new viewModel();
  vm.clients(ko.mapping.fromJS(data, ClientsMapping)());

  var cont1 = {
    'ContName': 'ContXX',
    'MoneyAccounts': [
      { Currency: "XXX", Amount: 1000 },
    ]
  };
  var cont2 = {
    'ContName': 'ContYY',
    'MoneyAccounts': [
      { Currency: "YYY", Amount: 1000 },
    ]
  };
  var cont3 = {
    'ContName': 'ContZZ',
    'MoneyAccounts': [
      { Currency: "ZZZ", Amount: 1000 },
    ]
  };
  var cont4 = {
    'ContName': 'ContWW',
    'MoneyAccounts': [
      { Currency: "WWW", Amount: 1000 },
    ]
  };

  vm.clients()[0].Containers.push(ko.mapping.fromJS(cont1, ContainersMapping));//Attempt1
  vm.clients()[0].Containers.push(ko.mapping.fromJS(cont2));//Attempt2
  vm.clients()[0].Containers.push(new ContainerModel(cont3));//Attempt3
  vm.clients()[0].Containers.push(ko.mapping.fromJS([cont4], ContainersMapping)()[0]);//Attempt4
  //...still no success.
})

Answer 1

您通常希望保持映射相互独立。一个好的方法是在每个 class:

中定义和执行映射

var ClientModel = function(data) {
  var mapping = {
    'Containers': {
      create: function(options) {
        var container = new ContainerModel(options.data)

        //Some computed observables for level two here...
        return container;
      }
    }
  }
  ko.mapping.fromJS(data, mapping, this);
}

组织好后，您可以通过几个选项将新项目添加到 observableArray：

创建新项并将其推送到数组：

vm.clients()[0].Containers.push(new ContainerModel(cont1))

在您的映射中指定一个关键选项：

var mapping = {
    'Containers': {
      key: function(item) {
        return ko.unwrap(item.ContName);
      },
      create: function(options) {
        var container = new ContainerModel(options.data)

        //Some computed observables for level two here...
        return container;
      }
    }
}

然后使用mappedCreate添加项目：

vm.clients()[0].Containers.mappedCreate(cont1);

JSFiddle

将新的 Observable 添加到 ko.mapping.fromJS 映射的 ObservableArray

Adding new Observable to ObservableArray mapped by ko.mapping.fromJS

javascript

jquery

knockout-mapping-plugin

knockout.js