kendo-ui的组件MVVM使用

一、Button

<div id="example">
    <button class="k-button-solid-primary" data-role="button" data-bind="click: onClickFn">Primary Button</button>
</div>

<script>
$(document).ready(function () {
    var viewModel = kendo.observable({
        onClickFn: function(e){
            console.log("click");
        }
    });
    kendo.bind($("#example"), viewModel);
})
</script>

二、TextBox

<div id="example">
    <input data-role="textbox" data-bind="value: textValue"/>
</div>
<script>
$(document).ready(function () {
    var viewModel = kendo.observable({
        textValue: "John Smith",
    });
    kendo.bind($("#example"), viewModel);
})
</script>

三、DropDownList

<div id="example"> 
    <input name="dropdownlist"
        data-role="dropdownlist" 
        data-bind="source: dropDownListDataSource" 
        data-filter="contains" 
        data-option-label="Please select city..." 
        data-text-field="CityName" 
        data-value-field="CityID"
        />
</div>
<script>
$(document).ready(function () {
    var viewModel = kendo.observable({
        dropDownListDataSource: [
		   	{ CityID: 1, CityName: "Lisboa"},
			{ CityID: 2, CityName: "Moscow"},
			{ CityID: 3, CityName: "Napoli"},
			{ CityID: 4, CityName: "Tokyo"},
			{ CityID: 5, CityName: "Oslo"},
			{ CityID: 6, CityName: "Pаris"},
			{ CityID: 7, CityName: "Porto"},
			{ CityID: 8, CityName: "Rome"},
			{ CityID: 9, CityName: "Berlin"},
			{ CityID: 10, CityName: "Nice"},
			{ CityID: 11, CityName: "New York"},
			{ CityID: 12, CityName: "Sao Paulo"},
			{ CityID: 13, CityName: "Rio De Janeiro"},
			{ CityID: 14, CityName: "Venice"},
			{ CityID: 15, CityName: "Los Angeles"},
			{ CityID: 16, CityName: "Madrid"},
			{ CityID: 17, CityName: "Barcelona"},
			{ CityID: 18, CityName: "Prague"},
			{ CityID: 19, CityName: "Mexico City"},
			{ CityID: 20, CityName: "Buenos Aires"}
        ],
    });
    kendo.bind($("#example"), viewModel);
})
</script>

四、DatePicker

<div id="example">
    <input name="datepicker" 
        data-role="datepicker" 
        data-parse-formats="['yyyy-MM-dd']"
        data-format="dd-MMM-yyyy" 
        data-type="date"/>
    <input name="datepicker" 
        data-role="datepicker" 
        data-parse-formats="['yyyy-MM-dd']"
        data-format="MMM yyyy"
        data-type="date"
		data-start="year" 
        data-depth="year"/>
</div>
<script>
$(document).ready(function () {
    var viewModel = kendo.observable({
    });
    kendo.bind($("#example"), viewModel);
})
</script>

五、AutoComplete

<div id="example">
    <input name="kd-place-chooser" 
        data-role="autocomplete" 
        data-bind="source: dropDownListDataSource" 
        data-filter="contains" 
        placeholder="Please select city..." 
        data-text-field="CityName"/>
</div>
<script>
$(document).ready(function () {
    var viewModel = kendo.observable({
        dropDownListDataSource: [
		   	{ CityID: 1, CityName: "Lisboa"},
			{ CityID: 2, CityName: "Moscow"},
			{ CityID: 3, CityName: "Napoli"},
			{ CityID: 4, CityName: "Tokyo"},
			{ CityID: 5, CityName: "Oslo"},
			{ CityID: 6, CityName: "Pаris"},
			{ CityID: 7, CityName: "Porto"},
			{ CityID: 8, CityName: "Rome"},
			{ CityID: 9, CityName: "Berlin"},
			{ CityID: 10, CityName: "Nice"},
			{ CityID: 11, CityName: "New York"},
			{ CityID: 12, CityName: "Sao Paulo"},
			{ CityID: 13, CityName: "Rio De Janeiro"},
			{ CityID: 14, CityName: "Venice"},
			{ CityID: 15, CityName: "Los Angeles"},
			{ CityID: 16, CityName: "Madrid"},
			{ CityID: 17, CityName: "Barcelona"},
			{ CityID: 18, CityName: "Prague"},
			{ CityID: 19, CityName: "Mexico City"},
			{ CityID: 20, CityName: "Buenos Aires"}
        ],
    });
    kendo.bind($("#example"), viewModel);
})
</script>

六、CheckBox

<div id="example">
    <input type="checkbox" 
        name="eq1" 
        data-role="checkbox" 
        data-bind="checked: eqCheckedValue"/>
</div>
<script>
$(document).ready(function () {
    var viewModel = kendo.observable({
        eqCheckedValue: true,
        onChange: function(e){
            console.log(e)
        },
    });
    kendo.bind($("#example"), viewModel);
})
</script>

七、RadioButton

<div id="example">
    <input type="radio" 
        name="engine" 
        data-role="radiobutton" 
        data-label="1.4 Petrol, 92kW" 
        data-bind="checked: engineCheckedValue"/>
</div>
<script>
$(document).ready(function () {
    var viewModel = kendo.observable({
        engineCheckedValue: true,
    });
    kendo.bind($("#example"), viewModel);
})
</script>

八、TextArea

<div id="example">
    <textarea name="textarea"
        placeholder="Tell us a little bit about yourself..."
        data-role="textarea" 
        data-rows="4" 
        data-resize="vertical" 
        maxlength="200" 
        required 
        data-required-msg="Please enter a text."
        data-max-msg="Enter value between 1 and 200">
    </textarea>
</div>
<script>
$(document).ready(function () {
    var viewModel = kendo.observable({
    });
    kendo.bind($("#example"), viewModel);
})
</script>