自动修剪所有可观察值的空白

Question

我在 Knockout 中有一个 ViewModel，它主要来自映射插件（即动态）。这工作正常。但是，现在我的客户希望我确保所有输入在提交到服务器之前都已删除空格。显然，修剪代码非常简单，但是对于 Knockout 来说相对较新，我不确定该代码到底应该放在哪里。我读到了extenders，但这似乎非常冗长和重复，要返回并将其添加到每个可观察对象中。另外，我什至不确定我是否可以对动态生成的 observables 执行此操作（例如，映射插件）。

是否有任何中心机制我可以扩展/覆盖，每次可观察到的变化时我可以注入一些修剪代码？基本上我试图避免花费数小时浏览我们所有的表单并添加如果我不需要，请在 HTML 中使用特殊的绑定语法。

谢谢。

Answer 1

我遇到了同样的问题。我写了一个扩展，这样你就可以在你的视图模型中调用trimmed，而不必改变你的绑定。例如：

var vm = {
    myValue: ko.observable('').trimmed()
}

扩展名：

ko.subscribable.fn.trimmed = function() {
    return ko.computed({
        read: function() {
            return this().trim();
        },
        write: function(value) {
            this(value.trim());
            this.valueHasMutated();
        },
        owner: this
    });
};

代码是on JSFiddle，带有示例。

Answer 2

以防万一有人在使用较新版本的 Knockout 时遇到此问题，当前排名靠前的答案将无法正常工作。

这是更新后的 fiddle 和代码，用于显示所需的更改：

ko.subscribable.fn.trimmed = function() {
    return ko.computed({
       read: function() {
           return this().trim();
       },
       write: function(value) {
           this(value.trim());
           this.valueHasMutated();
       },
       owner: this
   }).extend({ notify: 'always' });
};

如果有人知道为什么现在需要extend，请告诉我。我花了很长时间才弄清楚为什么它在 Knockout 3.1.0 中不能正常工作

Answer 3

你可以编写一个自定义绑定来修剪 observable。类似的东西

http://jsfiddle.net/belthasar/fRjdq/

Answer 4

以 Joe 的解决方案为起点，我们在实施过程中稍有不同。

注意：

• ko.observable() 括号中没有任何内容
• 新的 trimmed 读取函数只返回 this() 并且不会得到任何 null 或未定义的异常。

型号代码：

var vm = {
    myValue: ko.observable().trimmed()
}

扩展：

ko.subscribable.fn.trimmed = function() {
    return ko.computed({
        read: function() {
            return this();
        },
        write: function(value) {
            this(value.trim());
            this.valueHasMutated();
        },
        owner: this
    });
};

Answer 5

您可以创建一个在内部调用value 绑定的自定义绑定，或者您可以在实际绑定之前将value 绑定覆盖为自动修剪（不推荐）。

基本思路：

• 拦截value绑定
• 将传递的 observable 包装在 computed 中
• 从计算的而不是从原始的 observable 绑定 read 和 write
• 当新的输入到达时，在我们写之前修剪它
• 当模型值发生变化时，修剪它并根据需要更新模型和 UI

ko.bindingHandlers.trimmedValue = {
  init: function(element, valueAccessor, allBindings) {
    const ogValue = valueAccessor();
    let newVa = valueAccessor;
    
    // If this is a type="text" element and the data-bound value is observable,
    // we create a new value accessor that returns an in-between layer to do
    // our trimming
    if (element.type === "text" && ko.isObservable(ogValue)) {
      const trimmedValue = ko.observable().extend({"trim": true});
      
      // Write to the model whenever we change
      trimmedValue.subscribe(ogValue);
      
      // Update when the model changes
      ogValue.subscribe(trimmedValue);
      
      // Initialize with model value
      trimmedValue(ogValue());
      
      // From now on, work with the trimmedValue 
      newVa = () => trimmedValue;
    }

    // Note: you can also use `ko.applyBindingsToNode`
    return ko.bindingHandlers.value.init(element, newVa, allBindings)
  }
}

// Our observable to check our results with
var myObs = ko.observable("test ");
myObs.subscribe(function(newValue) {
  console.log("Change: \"" + newValue + "\"");
});

// The extender that does the actual trim
ko.extenders.trim = function(target, option) {
  return ko.computed({
    read: target,
    write: function(val) {
      target(
        val && typeof val.trim === "function"
          ? val.trim()
          : val
      );

      // This makes sure the trimming always resets the input UI
      if (val !== target.peek()) {
        target.valueHasMutated();
      }
    }
  }).extend({notify: "always"});
};

ko.applyBindings({
  myObs: myObs
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<h4><code>type="text" trimmedValue</code></h4>
<input type="text" data-bind="trimmedValue: myObs">

如果您不关心模型中一些不需要的valueHasMutateds

棘手的部分是确定您希望在模型中接收哪些更新...下面的示例不会触发 valueHasMutated 也不会改变模型的 observable。 然而，如果您将 model 值更改为未修剪的字符串，绑定处理程序将立即重置它。例如：myObs(" test ") 将触发

1. Change: " test "，和
2. Change: "test"

如果您只需要从 UI 修剪到模型，并且不介意一些额外的更新，您可以使用：

ko.bindingHandlers.value.init = function(element, valueAccessor, allBindings) {
  const ogValue = valueAccessor();
  const newVa = (element.type === "text" && ko.isObservable(ogValue))
    ? () => ogValue.extend({"trim": true})
    : valueAccessor;

  return ogValueInit(element, newVa, allBindings)
};

覆盖默认的value绑定

要将此行为用作标准行为（同样，不推荐），您可以：

const ogValueInit = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function( /*... */ ) {
  // ...
  return ogValueInit( /* ... */);
};

const ogValueInit = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function(element, valueAccessor, allBindings) {
  const ogValue = valueAccessor();
  let newVa = valueAccessor;

  // If this is a type="text" element and the data-bound value is observable,
  // we create a new value accessor that returns an in-between layer to do
  // our trimming
  if (element.type === "text" && ko.isObservable(ogValue)) {
    const trimmedValue = ko.observable().extend({"trim": true});

    // Write to the model whenever we change
    trimmedValue.subscribe(ogValue);

    // Update when the model changes
    ogValue.subscribe(trimmedValue);

    // Initialize with model value
    trimmedValue(ogValue());

    // From now on, work with the trimmedValue 
    newVa = () => trimmedValue;
  }

  return ogValueInit(element, newVa, allBindings)
};

// Our observable to check our results with
var myObs = ko.observable("test ");
myObs.subscribe(function(newValue) {
  console.log("Change: \"" + newValue + "\"");
});

// The extender that does the actual trim
ko.extenders.trim = function(target, option) {
  return ko.computed({
    read: target,
    write: function(val) {
      target(
        val && typeof val.trim === "function"
          ? val.trim()
          : val
      );

      // This makes sure the trimming always resets the input UI
      if (val !== target.peek()) {
        target.valueHasMutated();
      }
    }
  }).extend({notify: "always"});
};

ko.applyBindings({
  myObs: myObs
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<h4><code>type="text" value</code></h4>
<input type="text" data-bind="value: myObs">

Answer 6

对我们来说效果很好的另一种方法 - 在编辑字段时修剪：

$(document.body).on('blur', 'input, textarea', function () { this.value = this.value.trim(); $(this).trigger('change'); });

“更改”事件的触发器确保 KO 获取更改（使用 KO v2 测试）。