Knockout: limite numero di caratteri in un campo osservabile

Question

Ho un campo nome osservabile nel mio modello di visualizzazione ad eliminazione diretta. Ora voglio limitare il numero di caratteri in questo campo se supera il numero certo.

Come se name = "John Smith" e ho un limite di 6 caratteri, allora
visualizzazione "john s ..."

Answer 1

Un'altra soluzione riutilizzabile è quella di creare un costume vincolante che visualizza una versione tagliata del testo.

Ciò consente al valore sottostante di rimanere inalterato, ma taglia il testo per scopi di visualizzazione. Ciò sarebbe utile per qualcosa come un'anteprima del messaggio o per l'adattamento dei dati in una colonna della griglia.

Esempio di legame:

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 
     }; 
    } 
}; 

usare in questo modo:

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

o ...

<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> 

Oppure si può creare un osservabile calcolato nel vostro ViewModel, come ad come:

var self = this; 

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

e poi:

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

Answer 3

Chris Dixon le soluzioni sono perfette se hai un campo che ha una lunghezza massima. Ma se devi ripetere questa operazione più volte diventa ingombrante. Questo è quando si dovrebbe scrivere un extender osservabile personalizzato, in questo modo:

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; 
}; 

È quindi possibile utilizzarlo su qualsiasi osservabile, ed è possibile specificare una diversa lunghezza massima per nessuno di loro. Ciò rimuove il disordine dall'HTML (soluzione 1) e la necessità di scrivere un osservabile calcolato (soluzione 2). È sufficiente definire il osservabile nel seguente modo:

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

Answer 4

Se si desidera troncare il valore per un numerico i nput si potrebbe usare e extender che troncherà il valore simile al seguente:

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

     return target; 
    }; 

e quindi creare un legame che la volontà personalizzato aggiungerà l'estensione per l'osservabile:

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);  
    } 
}; 

Sul tuo html si applica vincolante il maxLength come segue:

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