выбранная опция не обновляется, когда наблюдаемые обновления, хотя optionsValue делает - PullRequest
Новая
       27

выбранная опция не обновляется, когда наблюдаемые обновления, хотя optionsValue делает

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

В следующем коде продукт (обозначенный productVM) имеет наблюдаемое свойство (productName), содержащее его имя на двух языках (английском и французском).

Когда cartItemдобавлен, и продукт выбран, я хочу, чтобы его отображаемое имя обновлялось при нажатии кнопки «изменить язык» (например, если выбрана «Дверь» и затем нажата «изменить язык», отображаемое имя должно бытьфранцузская версия (это просто английское слово плюс суффикс французского языка "eux")).

Но это не работает: параметры меняются, но выбранный параметр изменяется на параметр заголовка.

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

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 != undefined) {
      return self.language() == "english" ? 
        product.productName().english : product.productName().french;
    }
  }
  self.getProductColours = function (selectedProductName) {
    selectedProductName = selectedProductName();
    // if not caption
    if (selectedProductName) {
      var matched = ko.utils.arrayFirst(self.availableProducts(), function (product) {
        return (self.language() == "english" ? product.productName().english : product.productName().french) == selectedProductName;
      });
      return matched.availableColours;
    }
  }
  self.addCartItem = function (a, b, c, d) {
    self.cartItems.push(new cartItemVM());
  }
  self.changeLanguage = function () {
    self.language() == "english" ?
      self.language("french") :
      self.language("english");
  }
}
self.productVM = function (name, availableColours) {
  var self = this;
  self.productName = ko.observable({
  english: name,
  french: name + "eux",
  });
  self.availableColours = ko.observableArray(availableColours);
}
self.cartItemVM = function () {
  var self = this;
  self.cartItemName = ko.observable();
  self.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>
<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.getProductName(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: 'change language', click: changeLanguage" />
  </div>
</div>

1 Ответ

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

Ваша проблема возникает при изменении options вашего выбора.Во время изменения ваша value связанная наблюдаемая cartItemName содержит строку English .Например: Door.Как только вы меняете язык, не существует ни единого option, который возвращает Door для его выражения optionsValue, что приводит к полной очистке value.

Лучшее решение - сохранить ссылкук вашей фактической модели представления, а не просто к ее имени строки.Это требует от вас перемещения некоторых других фрагментов, так как вы вручную обновляете совсем немного.

Начальная точка изменения: 

// Remove
self.cartItemName = ko.observable(); 

// Add
self.cartItem = ko.observable();

// Change
<select data-bind="...
  value: cartItem
" />

В рабочем фрагменте, с некоторыми другими изменениями, облегчающими мою работу: 

var handlerVM = function () {
  var self = this;

  self.cartItems = ko.observableArray([]);
  self.language = ko.observable("english");
  self.availableProducts = ko.observableArray([
    new productVM("Shelf", ['White', 'Brown']),
    new productVM("Door", ['Green', 'Blue', 'Pink']),
    new productVM("Window", ['Red', 'Orange'])
  ]);

  self.productNameFor = function(product) {
    return product.productName()[self.language()];
  };
  
  self.addCartItem = function (a, b, c, d) {
    self.cartItems.push(new cartItemVM());
  }
  
  self.changeLanguage = function () {
    self.language() == "english" ?
      self.language("french") :
      self.language("english");
  }
}
self.productVM = function (name, availableColours) {
  var self = this;
  self.productName = ko.observable({
    english: name,
    french: name + "eux",
  });
  self.availableColours = ko.observableArray(availableColours);
}

self.cartItemVM = function () {
  var self = this;
  self.cartItem = ko.observable();
  self.cartItemColour = ko.observable();
}

ko.applyBindings(new handlerVM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
  <div data-bind="foreach: cartItems">
    <div>
      <select data-bind="options: $root.availableProducts,
                optionsText: $root.productNameFor,
                optionsCaption: 'Choose a product',
                value: cartItem"
      >
      </select>
    </div>
    <div data-bind="with: cartItem">
      <select data-bind="options: availableColours,
                optionsCaption: 'Choose a colour',
                value: $parent.cartItemColour"
      >
      </select>
    </div>
  </div>
  <div>
    <button data-bind="text: 'add cart item', click: addCartItem" />
    <button data-bind="text: 'change language', click: changeLanguage" />
  </div>
</div>
...