kendo-ui
검도 UI MVVM

소개

비고

기본 바인딩

보기 :

<form id="form">
    <label>First Name: <input data-bind="value: firstName" /></label>
    <label>Last Name: <input data-bind="value: lastName" /></label>
    <label>Gender:
        <select data-bind="source: genders, value: gender"></select>
    </label>
    <label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
    <button data-bind="enabled: agreed, click: register">Register</button>
    <div data-bind="visible: confirmed">
        Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
    </div>
</form>

보기 모델 :

var viewModel = kendo.observable({
        firstName: "Arif",
        lastName: "Rahman",
        genders: ["Male", "Female"],
        gender: "Male",
        agreed: false,
        confirmed: false,
        register: function(e) {
            e.preventDefault();

            this.set("confirmed", true);
        }
    });

    kendo.bind($("form"), viewModel);

데모 용 JSFIDDLER 예보기

바인딩은 DOM 요소 (또는 위젯) 속성과 View-Model의 필드 또는 메소드를 연결합니다. 바인딩은 양식 바인딩 이름 :보기 모델 필드 또는 메소드 (예 : 값 : firstName )의 데이터 바인드 속성을 통해 지정됩니다. 앞에서 예로 든 값 , 소스 , 표시 , 사용 및 클릭 과 같은 바인딩이 사용되었습니다.

Kendo UI MVVM은 html , attr 등의 다른 속성에 대한 바인딩도 지원합니다. 데이터 바인딩 에는 쉼표로 구분 된 바인딩 목록 (예 : data-bind = "enabled : agree, click : register") 이 포함될 수 있습니다.