使用create回调将嵌套对象映射为复杂JSON中的可观察对象

Question

I've got a complex object in a JSON format. I'm using Knockout Mapping, customizing the create callback, and trying to make sure that every object that should be an observable - would actually be mapped as such.

The following code is an example of what I've got: It enables the user to add cartItems , save them (as a JSON), empty the cart, and then load the saved items.

The loading part fails: It doesn't display the loaded option (ie, the loaded cartItemName ). I guess it's related to some mismatch between the objects in the options list and the object bounded as the cartItemName (see this post ), but I can't figure it out.

Code ( fiddle ):

 var cartItemsAsJson = ""; var handlerVM = function () { var self = this; self.cartItems = ko.observableArray([]); self.availableProducts = ko.observableArray([]); self.language = ko.observable(); self.init = function () { self.initProducts(); self.language("english"); } self.initProducts = function () { self.availableProducts.push( new productVM("Shelf", ['White', 'Brown']), new productVM("Door", ['Green', 'Blue', 'Pink']), new productVM("Window", ['Red', 'Orange']) ); } self.getProducts = function () { return self.availableProducts; } self.getProductName = function (product) { if (product) { return self.language() == "english" ? product.productName().english : product.productName().french; } } self.getProductValue = function (selectedProduct) { // if not caption if (selectedProduct) { var matched = ko.utils.arrayFirst(self.availableProducts(), function (product) { return product.productName().english == selectedProduct.productName().english; }); return matched; } } self.getProductColours = function (selectedProduct) { selectedProduct = selectedProduct(); if (selectedProduct) { return selectedProduct.availableColours(); } } self.addCartItem = function () { self.cartItems.push(new cartItemVM()); } self.emptyCart = function () { self.cartItems([]); } self.saveCart = function () { cartItemsAsJson = ko.toJSON(self.cartItems); console.log(cartItemsAsJson); } self.loadCart = function () { var loadedCartItems = ko.mapping.fromJSON(cartItemsAsJson, { create: function(options) { return new cartItemVM(options.data); } }); self.cartItems(loadedCartItems()); } } var productVM = function (name, availableColours, data) { var self = this; self.productName = ko.observable({ english: name, french: name + "eux" }); self.availableColours = ko.observableArray(availableColours); } var cartItemVM = function (data) { var self = this; self.cartItemName = data ? ko.observable(ko.mapping.fromJS(data.cartItemName)) : ko.observable(); self.cartItemColour = data ? ko.observable(data.cartItemColour) : ko.observable(); } var handler = new handlerVM(); handler.init(); ko.applyBindings(handler); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js "></script> <div> <div data-bind="foreach: cartItems"> <div> <select data-bind="options: $parent.getProducts(), optionsText: function (item) { return $parent.getProductName(item); }, optionsValue: function (item) { return $parent.getProductValue(item); }, optionsCaption: 'Choose a product', value: cartItemName" > </select> </div> <div> <select data-bind="options: $parent.getProductColours(cartItemName), optionsText: $data, optionsCaption: 'Choose a colour', value: cartItemColour, visible: cartItemName() != undefined" > </select> </div> </div> <div> <button data-bind="text: 'add cart item', click: addCartItem" /> <button data-bind="text: 'empty cart', click: emptyCart" /> <button data-bind="text: 'save cart', click: saveCart" /> <button data-bind="text: 'load cart', click: loadCart" /> </div> </div> 

What needs to be changed to fix it?

PS: I've got another piece of code (see it here ) that demonstrates a persistance of the selected value even after changing the options - though there optionsValue is a simple string, while here it's an object.

EDIT:

I figured out the problem: the call ko.mapping.fromJS(data.cartItemName) creates a new productVM object, which is not one of the objects inside availableProducts array. As a result, none of the options corresponds to the productVM contained in the loaded cartItemName , so Knockout thereby clears the value altogether and passes undefined .

But the question remains: how can this be fixed?

Answer 1

In the transition from ViewModel -> plain object -> ViewModel you loose the relation between the products in your cart and the ones in your handlerVM .

A common solution is to, when loading a plain object, manually search for the existing viewmodels and reference those instead. Ie:

• We create a new cartItemVM from the plain object
• Inside its cartItemName , there's an object that does not exist in handlerVM .
• We look in handlerVM for a product that resembles this object, and replace the object by the one we find.

In code, inside loadCart , before setting the new viewmodels:

loadedCartItems().forEach(
    ci => {
      // Find out which product we have:
      const newProduct = ci.cartItemName().productName;
      const linkedProduct = self.availableProducts()
          .find(p => p.productName().english === newProduct.english());

      // Replace the newProduct by the one that is in `handlerVM`
      ci.cartItemName(linkedProduct)
    }
)

Fiddle: https://jsfiddle.net/7z6010jz/

As you can see, the equality comparison is kind of ugly. We look for the english product name and use it to determine the match. You can also see there's a difference in what is observable and what isn't.

My advice would be to use unique id properties for your product, and start using those. You can create a simpler optionsValue binding and matching new and old values happens automatically. If you like, I can show you an example of this refactor as well. Let me know if that'd help.