MVVM架構~knockoutjs系列之文本框數符長度動态統計功能

傳回目錄

這個功能為什麼要寫呢,因為在之前做了一個前端的頁面效果,使用JS寫的,感覺很累,真的,對于一個文本框長度動态統計,你要寫blur,press,down什麼的事件,太麻煩了,這時,我想到了knockoutjs,這東西好,為什麼,是因為它夠簡單,夠強大,這兩點對于程式員來說,就是好!

先來看一下頁面的效果

當字數達到某個值時,如10個字,這時文本框将不允許你再次輸入,這使用了subscribe,而長度與文框關的關聯使用了computed(dependentObservable依賴螢幕也是可以的),而何時去觸發事件使用了valueUpdate屬性afterkeydown屬性值表示當鍵盤被按下時觸發.

下面看一下實作的原代碼

HTML代碼

<input type="text" data-bind="value:count,valueUpdate: 'afterkeydown'" />
  <span data-bind="text:countLen"></span>/10
  <span style="color: red;" data-bind="validationMessage:count"></span>      

JS代碼

/*computed valueUpdate等屬性的學習*/
        self.count = ko.observable().extend({
            maxLength: { params: 10, message: "最大長度為10" },
            required: {
                params: true,
                message: "請輸入字元..."
            }
        });
        self.count.subscribe(function (o) {//實作當大于某個長度時,隻綁定指定長度的字元
            if (o.length > 10)
                self.count(o.substr(0, 10));
        });

        self.countLen = ko.computed(function () {
            return self.count() ? self.count().trim().length : 0;
        });      

作者：倉儲大叔，張占嶺，

榮譽：微軟MVP

QQ：853066980

支付寶掃一掃，為大叔打賞!