Knockout：限制可觀察字段中的字符數

Question

我在我的挖空視圖模型中有一個可觀察的名稱字段。 現在我想限制這個字段中的字符數量，如果它超過了某個數字。

彷彿名稱=「約翰·史密斯」和我有6個字符的限制則
顯示「約翰小號......」

Answer 1

另一種可重複使用的解決方案是創建一個顯示文本的修剪版本的自定義綁定。

這可以使底層值保持不受影響，但爲顯示目的修剪文本。這對於消息預覽或將數據擬合到網格列等內容非常有用。

實例綁定：

ko.bindingHandlers.trimLengthText = {}; 
ko.bindingHandlers.trimText = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var trimmedText = ko.computed(function() { 
      var untrimmedText = ko.utils.unwrapObservable(valueAccessor()); 
      var defaultMaxLength = 20; 
      var minLength = 5; 
      var maxLength = ko.utils.unwrapObservable(allBindingsAccessor().trimTextLength) || defaultMaxLength; 
      if (maxLength < minLength) maxLength = minLength; 
      var text = untrimmedText.length > maxLength ? untrimmedText.substring(0, maxLength - 1) + '...' : untrimmedText; 
      return text; 
     }); 
     ko.applyBindingsToNode(element, { 
      text: trimmedText 
     }, viewModel); 

     return { 
      controlsDescendantBindings: true 
     }; 
    } 
}; 

使用方法如下：

<div data-bind="trimText: myText1"></div> 

或...

<div data-bind="trimText: myText1, trimTextLength: 10"></div> 

See Fiddle

Answer 2

<span data-bind="text: (name.length > 6 ? name().substring(0, 5) + '...' : name)"></span> 

或者你可以在你的視圖模型創建一個計算觀察到的，這樣的如：

var self = this; 

this.shortName = ko.computed(function() { 
    return (self.name.length > 6 ? self.name().substring(0, 5) + '...' : self.name); 
}); 

然後：

<span data-bind="text: shortName"></span> 

Answer 3

克里斯迪克森如果您有一個字段具有最大長度，則解決方案非常完美。但是如果你不得不多次重複這個操作，那就變得很麻煩。這時候，你應該寫一個自定義的可觀察的擴展，這樣的：

ko.extenders.maxLength = function(target, maxLength) { 
    //create a writeable computed observable to intercept writes to our observable 
    var result = ko.computed({ 
     read: target, //always return the original observables value 
     write: function(newValue) { 
      var current = target(), 
       valueToWrite = newValue ? newValue.substring(0, Math.min(newValue.length, maxLength)) : null; 

      //only write if it changed 
      if (valueToWrite !== current) { 
       target(valueToWrite); 
      } else { 
       //if the rounded value is the same, but a different value was written, force a notification for the current field 
       if (newValue !== current) { 
        target.notifySubscribers(valueToWrite); 
       } 
      } 
     } 
    }); 

    //initialize with current value to make sure it is rounded appropriately 
    result(target()); 

    //return the new computed observable 
    return result; 
}; 

然後，您可以使用它在任何可觀察到的，你可以對任何一個國家指定不同的最大長度。這消除了HTML中的混亂（解決方案1），並且需要編寫計算的可觀察數據（解決方案2）。您只需定義你觀察的方式如下：

this.shortName = ko.observable().extend({ maxLength: 25 }); 

Answer 4

如果要截斷的值數字i NPUT你可以使用和擴展，將截斷值如下所示：

ko.extenders.truncateValue = function(target, option) {        
     target.subscribe(function (newValue) { 
      if(newValue.length > option){ 
       target(newValue.substring(0,option)); 
      }      
     }); 

     return target; 
    }; 

，然後創建一個自定義綁定的意願將追加延長至觀察到：

ko.bindingHandlers.maxLength = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     'use strict';      

     var maxlength = element.getAttribute("maxlength"); 

     valueAccessor().extend({truncateValue: maxlength }) 
     ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, viewModel);  
    } 
}; 

在HTML應用的最大長度綁定，如下所示：

<input type="number" data-bind="maxLength: yourObservable" maxlength="9"></input>