Question

我是淘汰赛的新手，并尝试使用knockout（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 dev工具中调试，并且断点按正确的顺序命中，但它没有将RHS设置为null。我想可能是在LHS订阅函数可以将RHS设置为null之前对RHSControlType进行评估。

JS小提琴：here

感谢。

Answer 1

看起来你的问题出现了，因为输入和select元素都存在value: RHS。 select元素的值绑定默认为selected元素。来自knockout documentation：

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

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

_predicate.RHS2 = ko.observable();

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

Here is a fiddle

当其他可观察量发生变化时，重置observable的值

1 个答案: