正在将逻辑从视图移动到自定义绑定

Moving logic from the view to a custom binding

本文关键字：移动 自定义 绑定 视图      更新时间：2024-04-24

我创建了一个Knockout扩展程序，这样我就可以轻松地将表单字段恢复为其原始值。

我想从我的视野中去除混乱，所以我想转换这个：

<div data-bind="if: myObservedValue.hasChanges">
  <a href="#" data-bind="click: myObservedValue.revert">Revert</a>
</div>

变成这样：

  <a href="#" data-bind="revert: myObservedValue">Revert</a>

我知道我需要创建一个自定义绑定，但我很难找到一个干净的方法：

  1. 只将我的可观察扩展传递给我的绑定，并在内部应用可见绑定（考虑我的可观测扩展是否有更改）
  2. 组合多个绑定，因为我的"revert"绑定需要使用"click"answers"visible"绑定
  3. 避免将revert函数暴露在我的视图中

提前感谢

ko.extenders.revert = function(target, option) {
  target.revert = function() {
    target(target.previousValue);
    target.hasChanges(false);
  };
  target.previousValue = option;
  target.hasChanges = ko.observable(false);
  target.hasChanges.extend({
    rateLimit: 100
  });
  target.subscribe(function(newValue) {
    target.hasChanges(target() != target.previousValue);
  });
  return target;
};
var Vm = function(initialValue) {
  this.myObservedValue = ko.observable(initialValue).extend({
    revert: initialValue
  });
  this.revert = function() {
    this.revert();
  }.bind(this.myObservedValue);
  return {
    myObservedValue: this.myObservedValue,
    revert: this.revert
  }
}
ko.applyBindings(new Vm('Edit me!!!'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="textInput: myObservedValue" />
<div data-bind="if: myObservedValue.hasChanges">
  <a href="#" data-bind="click: myObservedValue.revert">Revert</a>
</div>

您可以使用applyBindingsToNode函数包装其他绑定

ko.extenders.revert = function(target, option) {
  target.revert = function() {
    target(target.previousValue);
    target.hasChanges(false);
  };
  target.previousValue = option;
  target.hasChanges = ko.observable(false);
  target.hasChanges.extend({
    rateLimit: 100
  });
  target.subscribe(function(newValue) {
    target.hasChanges(target() != target.previousValue);
  });
  return target;
};
var Vm = function(initialValue) {
  this.myObservedValue = ko.observable(initialValue).extend({
    revert: initialValue
  });
  this.revert = function() {
    this.revert();
  }.bind(this.myObservedValue);
  return {
    myObservedValue: this.myObservedValue,
    revert: this.revert
  }
}
ko.bindingHandlers["revert"] = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var obs = valueAccessor();
    
    ko.applyBindingsToNode(element, { visible: obs.hasChanges, click: obs.revert });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
  }
}
ko.applyBindings(new Vm('Edit me!!!'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="textInput: myObservedValue" />
<a href="#" data-bind="revert: myObservedValue">Revert</a>

通过包装textInput绑定以及，可以将锚全部去掉

var oldTextInputInit = ko.bindingHandlers["textInput"].init;
ko.bindingHandlers["textInput"].init = function(element, valueAccessor, allBindings, viewModel, bindingContext) {
  
  var obs = valueAccessor();
  if (obs.revert && obs.hasChanges) {
    var a = element.ownerDocument.createElement('a');
    a.href = '#';
    if ( element.nextSibling ) {
      element.parentNode.insertBefore(a, element.nextSibling);
    } else {
      element.parentNode.appendChild(a);
    }
    ko.applyBindingsToNode( a, { text: 'Revert', visible: obs.hasChanges, click: obs.revert });
  }
  return oldTextInputInit(element, valueAccessor, allBindings, viewModel, bindingContext);
}

您还可以向被重写的textInput绑定读取的输入添加另一个自定义绑定，这样您就可以传递一个模板名称来控制要添加的附加HTML，等等

相关文章：