сравнивая два наблюдаемых значения в нокаут-привязке данных - PullRequest
Новая
       8

сравнивая два наблюдаемых значения в нокаут-привязке данных

0 голосов
/ 21 января 2019

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

Но оценка наблюдаемого не меняет событие, хотя значение имеет изменения в наблюдаемом

Нижеэто код 

<div class="col-lg-4 col-sm-4 col-xs-4 text-center">
      <span data-bind="text:CurrentPlan().Id "></span>
      <span data-bind="text:CurrentElem().PointPlanId "></span>
      <span data-bind="text:CurrentPlan.Id == CurrentElem.PointPlanId"></span>
      <button class="btn btn-blue btn-alt" type="button" data-bind="click:AssignPlan,
         css: {'disabled':CurrentPlan.Id == CurrentElem.PointPlanId}"> Assign </button>
</div>

Я вижу изменение значения в добавленном диапазоне, но значение выражения не изменяется.

И currentPlan, и currentElem являются наблюдаемыми.

Пожалуйста, руководство

Спасибо

Шрути Наир

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Я вижу изменение значения в добавленном диапазоне

В этом случае я предполагаю, что Id и PointPlanId являются наблюдаемыми.

Итак, вы должны изменить свой код на: 

css: {'disabled':CurrentPlan().Id() == CurrentElem().PointPlanId()}"

Вот рабочий фрагмент: 

var viewModel = function() {
  const self = this;

  self.CurrentPlan = ko.observable({
    Id: ko.observable(10)
  });
  
  self.CurrentElem = ko.observable({
    PointPlanId: ko.observable(20)
  });

  self.AssignPlan = () => {}
  
  // make the value equal after 3 seconds
  setTimeout(() => self.CurrentPlan().Id(20), 3000);
}

ko.applyBindings(new viewModel())
.disabled {
  color: grey
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="col-lg-4 col-sm-4 col-xs-4 text-center">
  <span data-bind="text:CurrentPlan().Id"></span>
  <span data-bind="text:CurrentElem().PointPlanId"></span>
  <span data-bind="text:CurrentPlan().Id() === CurrentElem().PointPlanId()"></span>
  <button class="btn btn-blue btn-alt" type="button" data-bind="click:AssignPlan,
         css: {'disabled':CurrentPlan().Id() === CurrentElem().PointPlanId()}">Assign</button>
</div>

Вам не нужно использовать CurrentPlan().Id() в первой привязке text, потому что нокаут автоматически обрабатывает как наблюдаемые, так и обычные свойства, используя ko.utils.unwrapObservable. Если у вас есть какое-то выражение, включающее значения наблюдаемых, вам нужно использовать (), чтобы получить значение наблюдаемой.

0 голосов
/ 21 января 2019

Если CurrentPlan и CurrentElem являются наблюдаемыми, вам нужно использовать скобки (), чтобы получить значения 

<div class="col-lg-4 col-sm-4 col-xs-4 text-center">
      <span data-bind="text:CurrentPlan().Id "></span>
      <span data-bind="text:CurrentElem().PointPlanId "></span>
      <span data-bind="text:(CurrentPlan().Id == CurrentElem().PointPlanId)"></span>
      <button class="btn btn-blue btn-alt" type="button" data-bind="click:AssignPlan,
         css: {'disabled':(CurrentPlan().Id == CurrentElem().PointPlanId)}"> Assign </button>
</div>
...