Question

在淘汰赛应用中，我试图比较两个可观察的值并相应地分配类。

但是，可观察值的评估不会改变事件，尽管值在可观察值中有所变化

下面是代码

<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都是可观察的。

请指导

谢谢

Shruti指甲

Answer 1

如果可以观察到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>

Answer 2

我看到添加的范围中的值发生了变化

在这种情况下，我假设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自动处理可观察对象和常规属性。当您具有某种涉及可观察值的表达式时，需要使用()来获取可观察值。

比较敲除数据绑定中的两个可观察值

2 个答案: