Отображение вложенного объекта как наблюдаемого из сложного JSON с помощью обратного вызова create - PullRequest
Новая
       31

Отображение вложенного объекта как наблюдаемого из сложного JSON с помощью обратного вызова create

0 голосов
/ 21 мая 2018

У меня есть сложный объект в формате JSON.Я использую Knockout Mapping, настраиваю обратный вызов create и пытаюсь сделать так, чтобы каждый объект, который должен быть наблюдаемым, действительно отображался таким образом.

Следующий код является примером того, что яполучил: он позволяет пользователю добавлять cartItems, сохранять их (в формате JSON), очищать корзину, а затем загружать сохраненные элементы.

Загрузка не выполняется: не отображаетсязагруженная опция (т.е. загруженная cartItemName).Я предполагаю, что это связано с некоторым несоответствием между объектами в списке параметров и объектом, ограниченным как cartItemName (см. сообщение ), но я не могу понять это.

Код ( скрипка ): 

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>

Что нужно изменить, чтобы исправить это?

PS: у меня есть другой кусок кода (см. Здесь здесь), который демонстрирует сохранение выбранного значения даже после изменения параметров - хотя optionsValue - простая строка, а здесь - объект.

РЕДАКТИРОВАТЬ:

Я выяснил проблему: вызов ko.mapping.fromJS(data.cartItemName) создает новый объект productVM, который не является одним из объектов в массиве availableProducts.В результате ни одна из опций не соответствует productVM, содержащемуся в загруженном cartItemName, поэтому Knockout полностью очищает значение и передает undefined.

Но остается вопрос: как это можно исправить?

1 Ответ

0 голосов
/ 30 мая 2018

При переходе от ViewModel -> plain object -> ViewModel вы теряете связь между продуктами в вашей корзине и продуктами в вашей handlerVM.

Распространенным решением является, при загрузке простого объекта, поиск вручнуюсуществующие видовые модели и ссылаться на них.Т.е.:

  • Мы создаем новый cartItemVM из простого объекта
  • Внутри cartItemName есть объект, который не существует в handlerVM.
  • Мы ищем в handlerVM продукт, который напоминает этот объект, и заменяем объект на тот, который мы находим.

В коде, внутри loadCart, передустановка новых моделей просмотра: 

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/

Как вы можете видеть, сравнение на равенство выглядит некрасиво.Мы ищем название продукта english и используем его для определения соответствия.Вы также можете увидеть разницу в том, что можно наблюдать, а что нет.

Мой совет - использовать уникальные свойства id для вашего продукта и начать их использовать.Вы можете создать более простую привязку optionsValue, и сопоставление новых и старых значений происходит автоматически.Если хотите, я также могу показать вам пример этого рефакторинга.Дайте мне знать, если это поможет.

...