नॉकआउट: एक अवलोकन योग्य क्षेत्र में वर्णों की संख्या सीमित करें

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> 

या फिर आप अपने ViewModel में एक गणना की नमूदार बना सकते हैं, इस तरह के के रूप में:

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

इसके बाद आप किसी भी नमूदार पर इसका इस्तेमाल कर सकते हैं और आप उनमें से किसी के लिए एक अलग अधिकतम लंबाई निर्दिष्ट कर सकते हैं: है कि जब आप एक कस्टम नमूदार एक्सटेंडर लिखना चाहिए, इस तरह है। यह एचटीएमएल (समाधान 1) से अव्यवस्था को हटाता है, और एक गणना किए गए अवलोकन योग्य (समाधान 2) लिखने की आवश्यकता को हटा देता है। आप बस अपनी नमूदार निम्नलिखित तरीके से परिभाषित करते हैं:

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

Answer 4

आप के लिए मूल्य काटना चाहते हैं एक संख्यात्मक i Nput आप इस्तेमाल कर सकते हैं और एक्सटेंडर कि निम्नलिखित की तरह मूल्य काटना होगा:

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 आप लागू पर:

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

     return target; 
    }; 

और फिर नमूदार को एक्सटेंडर जोड़ देंगे, एक कस्टम बाध्यकारी कि इच्छा बनाने

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