KO範例24 – Kendo輸入欄位唯讀切換

knockout.js內建enable繫結,可透過ViewModel的布林值切換<input>、<textarea>及<select>啟用與否產生唯讀效果。工作專案中有些輸入欄位採用的Knockout-Kendo所繫結的Kendo DatePicker及NumericTextBox就不在enable支援之列。為此,我寫了一個自訂繫結kendoEnable,支援DatePciker、NumericTextBox(視需要可再擴充),也能繫結特定屬性切換唯讀:

    //由特定值的true/false決定啟用或停用Kendo DatePicker及NumericTextBox
    ko.bindingHandlers["kendoEnable"] = {
        update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var $inp = $(element);
            var kendoObject = $inp.data("kendoDatePicker") || $inp.data("kendoNumericTextBox");
            var val = ko.utils.unwrapObservable(valueAccessor());
            if (val) {
                kendoObject.enable();
                $inp.removeClass("a-readonly");
            }
            else {
                kendoObject.readonly();
                $inp.addClass("a-readonly");
            }
        }
    };

操作示範如下:

線上展示(JS Bin)

[KO系列]

http://www.darkthread.net/kolab/labs/default.aspx?m=post
歡迎推文分享:
Published 08 July 2013 11:40 PM 由 Jeffrey
Filed under:
Views: 6,314



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<July 2013>
SunMonTueWedThuFriSat
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication