Блог

Я застрял в родительской / дочерней ситуации с нокаутом. У меня есть таблица, созданная из списка данных (счетов и деталей). Мне нужно, чтобы при установке некоторых флажков в таблице выполнялись определенные действия.

В настоящее время у меня многое из этого работает, когда установлены флажки. Но только одна из нескольких целей работает, когда флажки не установлены. Я не смог понять, как заставить это работать.

Ниже приведен скриншот моего jsfiddle.

_{(источник:kingwilder.com )}

Цель

Когда один или оба флажка «Использовать кредит» установлены:

• Отключите «примененные» входные данные для счета-фактуры и элементов детализации в текущем контексте — в настоящее время работает
• Поместите общую сумму к оплате (сумму кредита) из любых отмеченных полей в поле ввода верхней суммы как положительное значение — в настоящее время работает
• Отключите радиостанции (чек, кредитную карту, другое) — в настоящее время работают

Когда один или оба флажка «Использовать кредит» сняты:

• Включить «примененные» входные данные для счета-фактуры и элементов детализации в текущем контексте — не работает
• Удалите только проверенную сумму текущего контекста, подлежащую оплате, из ввода верхней суммы — в настоящее время работает
• Включите радиостанции — не работает

Любая помощь приветствуется. Это мой рабочий jsFiddle: jsFiddle

Это код, который в настоящее время выполняет обновления пользовательского интерфейса, когда установлен флажок:

 self.SelectedItems.subscribe(function(datalist){
  //console.log(ko.toJSON(item));
  var totalAmountSelected = 0;

  console.log("selected list: "   self.SelectedItems().length   " - datalist: "   datalist.length);

  ko.utils.arrayForEach(datalist, function(node){
    totalAmountSelected  = parseFloat(node.amountdue() * -1);
    node.Disable(true);
    node.Parent.Disable(true);
    self.Disable(true);
  });

  self.Amount(totalAmountSelected);

});
  

Здесь слишком много кода для показа, поэтому, пожалуйста, посмотрите скрипку.

Я предлагаю подход, который использует логическую наблюдаемую привязку к вашим флажкам в сочетании с ko.computed для сбора всех проверенных сведений.

В настоящее время вы пытаетесь добавить каждое значение из отмеченных полей «использовать кредит» в массив.

При таком подходе каждая деталь имеет useCredit наблюдаемое значение, которое является либо true , либо false . В модели родительского представления вычисляемый массив вычисляет, есть ли хотя бы одна деталь, которая имеет useCredit() === true .

Реализация:

В Detail :

 self.useCredit = ko.observable(false);
  

С привязкой флажка использовать кредит следующим образом:

 <td>
  <div data-bind="visible: amountdue() < 0" class="usecredit">
    <input type="checkbox" data-bind="checked: useCredit" /> Use Credit
  </div>
</td>
  

disable Привязка данных на другом входе может быть привязана непосредственно к отрицаемому useCredit значению: data-bind="disable: !useCredit()"

Теперь начинается вычисляемая цепочка вплоть до payment viewmodel. В Invoice вы вычисляете useCredit свойство на основе всех деталей:

 self.useCredit = ko.computed(function() {
  return self.details().some(function(detail) {
    return detail.useCredit();
  })
});
  

Почти тот же код можно использовать в payment :

 self.useCredit = ko.computed(function() {
  return self.invoices().some(function(invoice) {
    return invoice.useCredit();
  })
});
  

Теперь вы можете привязать атрибут отключения переключателей к любому из них useCredit или вы можете переименовать его в Disable .

Вот эти изменения, реализованные в вашей скрипке:https://jsfiddle.net/qLrgb9bs /

PS На вашем месте я бы удалил привязки к данным события изменения и использовал подписки / вычисления.