中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

MVVM架構~knockoutjs系列之文(wen)本框數(shu)符長(chang)度動(dong)態統計功能(neng)

返回目錄

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

先來看一下頁面的效果

 

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

下面看一下實現的原代碼

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等(deng)屬性的學習(xi)*/
        self.count = ko.observable().extend({
            maxLength: { params: 10, message: "最大長度為10" },
            required: {
                params: true,
                message: "請輸入字符..."
            }
        });
        self.count.subscribe(function (o) {//實現當大于(yu)某個長度(du)時,只綁定(ding)指定(ding)長度(du)的字符
            if (o.length > 10)
                self.count(o.substr(0, 10));
        });

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

 

返回目錄

 

posted @ 2014-05-08 14:42  張占嶺  閱讀(1526)  評論(1)    收藏  舉報