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のフィールドまたはメソッドをペアにします。バインディングは、フォームバインディング名：ビューのモデルフィールドまたはメソッド （例： value：firstName）のdata-bind属性で指定します 。上記の例では、 value 、 source 、 visible 、 enabled 、およびclickというバインディングが使用されていました。

剣道UI MVVMは、他のプロパティ（ html 、 attrなど）へのバインディングもサポートしています。 データバインドには、カンマ区切りのバインディングリスト（ data-bind = "enabled：agreed、clicks：register"など）が含まれます。