当其他 observable 发生变化时重置 observable 的值

Question

我是淘汰赛的新手，我正在尝试使用淘汰赛 (v3.2.0) 在我们的应用程序中构建一个新功能。该功能是一个谓词，用户可以在其中选择 LHS 上的属性及其返回类型并指定 RHS 值。每当 LHS 值更改（或其返回类型）时，我想重置 RHS 值但它没有按预期工作。这是代码

function Predicate(){
   var _predicate = this;
  _predicate.LHS = ko.observable();
  _predicate.RHS = ko.observable();
  _predicate.LHSReturnType = ko.observable();
  _predicate.LHS.subscribe(function (newVal) {
    this.RHS(null);
    //predicatePropertyMgr.CleanPredicateProperties();
    console.log(this.LHS() + ' ---- ' + this.LHSReturnType() + ' ------ ' + this.RHS());
    
  }, _predicate);
  
  _predicate.LHSReturnType.subscribe(function(){
		  this.RHS(null);
      console.log(this.LHS() + ' ---- ' + this.LHSReturnType() + ' ------ ' + this.RHS());
  }, _predicate);
	
  _predicate.PropertyNames = ko.computed(function () {
            //return predicatePropertyMgr.GetAllProperties();
    return [{ DisplayName: 'Status', FieldName: 'StatusID' }, 
            { DisplayName: 'Due Date', FieldName: 'DueDate' }];
  });
  
  _predicate.AllowedReturnTypes = ko.computed({
    read: function () {
      let propName = _predicate.LHS();
      if(propName == 'StatusID')
      {
        return [{ ID: 1, Name: 'Text' }, 
        				{ ID: 2, Name: 'Number' }];
      }
      if(propName == 'DueDate')
      {
        return [{ ID: 3, Name: 'Date' }];
      }
      return [];
    },
    deferEvaluation: true
  });
  
  _predicate.PropertyOptions = ko.computed({
    read: function () {
      return [{ displayText: 'Any', value: 0 }, 
              { displayText: 'New', value: 1 }, 
              { displayText: 'InProgress', value: 2 }];
    },
    deferEvaluation: true
  });
   _predicate.RHSControlType = ko.computed({
     read: function () {
       let propName = _predicate.LHS();
       if (propName == 'StatusID') {
         return 'combo';
       }
       if (propName == 'DueDate') {
         return 'textbox';
       }
       return 'textbox';
     },
     deferEvaluation: true
   });
};

var vm = new Predicate();
ko.applyBindings(vm);
console.log(vm.LHS() + ' ---- ' + vm.LHSReturnType() + ' ------ ' + vm.RHS());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select  data-bind="options:PropertyNames, value: LHS, optionsText:'DisplayName', optionsValue:'FieldName'"></select>
<!--
<select data-bind="options: AllowedReturnTypes, optionsText:'Name', optionsValue:'ID', value: LHSReturnType"></select>
-->
<!--ko if: RHSControlType() == 'textbox' || RHSControlType() == 'textArea'-->
<input type="text" placeholder="Enter a value" data-bind="value: RHS" />
<!--/ko-->
<!--ko if: RHSControlType() == 'combo'-->
<select data-bind="options: PropertyOptions, optionsText:'displayText', optionsValue:'value', value: RHS"></select>
<!--/ko-->

我确定我在这里遗漏了一些简单的东西。我期待文本框呈现时，它应该是空的。淘汰赛如何评估计算的可观察量是否有顺序？我确实尝试在 chrome 开发工具中进行调试，并且断点按正确的顺序命中，但它没有将 RHS 设置为空。我在想可能是在 LHS 订阅功能可以将 RHS 设置为 null 之前评估 RHSControlType。

JS 小提琴：https://jsfiddle.net/vabii/t2Lszjqm/

谢谢。

Answer 1

看起来您的问题出现了，因为value: RHS 存在于输入和选择元素上。选择元素的值绑定默认为所选元素。来自knockout documentation：

通常，当您在元素上使用值绑定时，它 表示您希望关联的模型值描述哪个项目 在中被选中。

我怀疑您在文本框中得到了 0，因为 select 排在第二位并更新了绑定。如果您使用单独的绑定，问题就会消失。

_predicate.RHS2 = ko.observable();

<select data-bind="options: PropertyOptions, optionsText:'displayText', optionsValue:'value', value: RHS2"></select>

Here is a fiddle