MVVM架構~knockoutjs系列之文本框數符長度動態統計功能 - lori－IT工程師數位筆記本

文章出處

這個功能為什么要寫呢,因為在之前做了一個前端的頁面效果,使用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;
        });