MVVM schema ~knockoutjs series of text box number character length dynamic statistics function

Back to Catalog

Why do you write this function, because before doing a front-end page effect, using JS write, feel very tired, really, for a text box length dynamic statistics, you want to write Blur,press,down what event, too troublesome, at this time, I think of Knockoutjs, this thing good, Why, because it is simple enough, strong enough , these two points for the programmer, is good!

First look at the effect of the page

When the word count reaches a certain value, such as 10 words, then the text box will not allow you to enter again, this uses the subscribe, and the length of the link with the text box is used computed (dependentobservable dependent on the monitor is also possible), and when to trigger the event using the The valueupdate property Afterkeydown property value indicates that the keyboard is triggered when it is pressed.

Let's take a look at the implementation of the original code

HTML code

  <input type="text" data-bind="value:count,valueupdate: ' Afterkeydown '  " />  <span data-bind="text:countlen"></span>/  Ten  <span style="color:red; " data-bind=" ></span> "validationmessage:count"

JS Code

        /*study on the properties of computed Valueupdate*/Self.count=ko.observable (). Extend ({maxLength: {params:Message: "Maximum length is 10"}, Required: {params:true, message:"Please enter characters ..."            }        }); Self.count.subscribe (function(o) {//implements a character that is bound to a specified length when it is greater than a certain length            if(O.length > 10) Self.count (O.substr (0, 10));        }); Self.countlen= Ko.computed (function () {            returnSelf.count ()? Self.count (). Trim (). length:0; });

Back to Catalog