Question

我正在尝试将一个新的Observable添加到ObservableArray中，该ObservableArray最初是使用KO的映射插件映射的。但我没有那么努力。 Firebug告诉我“TypeError：totalChf不是函数”。查看添加的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

您通常希望保持映射彼此独立。一个好方法是在每个类中定义和执行映射：

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

1 个答案: