=====================input textarea=============================<div id="view">     <input data-bind="value: inputValue" />     <textarea data-bind="value: textareaValue"></textarea> </div> <script> var viewModel = kendo.observable({     inputValue: "Input value",     textareaValue: "Textarea value" }); kendo.bind($("#view"), viewModel); </script> 备注:当触发事件时才执行绑定，需要在input或textarea标签里加data-value-update="keyup"或data-value-update="keypress"=====================textarea,dropdownlist=============================<select data-text-field="name" data-value-field="id" data-bind="source: products,value:names" multiple="multiple"></select> <script> var viewModel = kendo.observable({ products: [     { id: 1, name: "Coffee" },     { id: 2, name: "Tea" },     { id: 3, name: "Juice" } ],names: ["Tea","Juice"],}); kendo.bind($("select"), viewModel); 备注:绑定的value:names在绑定的source: products生效前会失效，所以两个不能同时用，只能通过在绑定source: products后用jquery实现:$("select").val(["Tea","Juice"]);</script>===============Kendo UI dropdown list级联菜单刷新：在父dropdown list上绑定change事件函数：change : onItemChange在函数中刷新更新子dropdow list的数据源(data source)var subDDList = $(‘#subListDiv‘).data("kendoDropDownList");subDDList.setDataSource(buildSubList(selectParentId));=====================select=============================<select data-bind="source: colors"></select><script>var viewModel = kendo.observable({    colors: [ "Red", "Green", "Blue" ]});kendo.bind($("select"), viewModel);</script>=====================<select data-text-field="name" data-value-field="id" data-bind="source: products"></select><script>var viewModel = kendo.observable({    products: [        { id: 1, name: "Coffee" },        { id: 2, name: "Tea" },        { id: 3, name: "Juice" }    ]});kendo.bind($("select"), viewModel);</script>====================================上传组件==========================================上传文件对话框使用$("#selectedFiles").kendoUpload({    async: {        saveUrl:  "myDomain/fileUpload.htm",        autoUpload: true    },    multiple:true, // 支持多个文件上传,    complete: uploadFileComplete, //上传结束以后处理,    error: one rror,    cancel: onCancel,    select: onSelect,    success: onSuccess});调用代码 $("#selectedFiles ").click();//模拟鼠标双击事件调用,页面上selectedFileshtml元素为隐藏对象。=========================checkbox多选框绑定==================================<input type="checkbox" value="http://www.mamicode.com/Red" data-bind="checked: colors" />Red<input type="checkbox" value="http://www.mamicode.com/Green" data-bind="checked: colors" />Green<input type="checkbox" value="http://www.mamicode.com/Blue" data-bind="checked: colors" />Blue<script>    var viewModel = kendo.observable({        colors: ["Red","Green"]    });     kendo.bind($("input"), viewModel);</script>=======================<input type="checkbox" data-bind="checked: isChecked" /><script>var viewModel = kendo.observable({    isChecked: false}); kendo.bind($("input"), viewModel);</script>=========================rado单选按钮绑定==================================<input type="radio" value="http://www.mamicode.com/Red" name="color" data-bind="checked: selectedColor" />Red<input type="radio" value="http://www.mamicode.com/Green" name="color" data-bind="checked: selectedColor" />Green<input type="radio" value="http://www.mamicode.com/Blue" name="color" data-bind="checked: selectedColor" />Blue<script>    var viewModel = kendo.observable({        selectedColor: "Green"    });     kendo.bind($("input"), viewModel);</script>=========================UL LI模板绑定==================================<ul data-template="ul-template" data-bind="source: products"></ul><script id="ul-template" type="text/x-kendo-template">    <li>        id: <span data-bind="text: id"></span>        name: <span data-bind="text: name"></span>    </li></script><script>var viewModel = kendo.observable({    products: [        { id: 1, name: "Coffee" },        { id: 2, name: "Tea" },        { id: 3, name: "Juice" }    ]});kendo.bind($("ul"), viewModel);</script>===========================UL LI模板一维数组数据绑定=========================<ul data-template="ul-template" data-bind="source: products"></ul><script id="ul-template" type="text/x-kendo-template">    <li data-bind="text: this"></li></script><script>var viewModel = kendo.observable({    products: [ "Coffee", "Tea", "Juice" ]}); kendo.bind($("ul"), viewModel);</script>=====================span text=============================<span data-bind="text: name"></span> <script> var viewModel = kendo.observable({ name: "John Doe" }); kendo.bind($("span"), viewModel); </script>=====================span html==============================<span data-bind="html: name"></span> <script> var viewModel = kendo.observable({ name: "<strong>John Doe</strong>" }); kendo.bind($("span"), viewModel); </script>=====================invisible 显示不显示==============================<div id="view"> <div data-bind="invisible: isInvisible">some content</div> <button data-bind="click: show">Show</button> </div> <script> var viewModel = kendo.observable({ isInvisible: true, show: function () { this.set("isInvisible", false); } }); kendo.bind($("#view"), viewModel); </script>=====================disabled 有效没有效==============================<div id="view"><input type="text" data-bind="value: name, disabled: isNameDisabled" /><button data-bind="click: disableInput">Disable</button></div><script>    var viewModel = kendo.observable({        isNameDisabled: false,        name: "John Doe",        disableInput: function () {            this.set("isNameDisabled", true);        }    });     kendo.bind($("#view"), viewModel);</script>=======================style 动态改变样式===============================<span data-bind="style: {color: priceColor, fontWeight: priceFontWeight},text: price"></span><script>    var viewModel = kendo.observable({        price: 42,        priceColor: function() {            var price = this.get("price");            if (price <= 42) {                return "#00ff00";            } else {                return "#ff0000";            }        },        priceFontWeight: function() {            var price = this.get("price");            if (price <= 42) {                return "bold";            } else {                return "";             }        }    });    kendo.bind($("span"), viewModel);</script>要注意的是CSS属性的名称，如果CSS名称中含有连字符（-），比如font-weight, font-size ,background-color等，在使用时需要省略到连字符，使用camel风格的命名，如fontWeight, fontSize,backgroundColor等。 ========================上层绑定=============================<div data-template="div-template" data-bind="source: person">    <script id="div-template" type="text/x-kendo-template">    Name: <span data-bind="text: name"></span>    </script></div><script>var viewModel = kendo.observable({    person: {        name: "John Doe"    }});kendo.bind($("div"), viewModel);</script>========================上层单维数据绑定=============================<div data-template="div-template" data-bind="source: this">    <script id="div-template" type="text/x-kendo-template">    Name: <span data-bind="text: name"></span>    </script></div><script>var viewModel = kendo.observable({    name: "John Doe"});kendo.bind($("div"), viewModel);</script>========================属性绑定=============================<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" /><script>var viewModel = kendo.observable({    imageSource: "http://www.kendoui.com/image/kendo-logo.png",    imageAlt: "Kendo Logo"}); kendo.bind($("#logo"), viewModel);</script>========================<div data-bind="attr: { data-foo: fooValue, data-bar: barValue }"></div> <script>var viewModel = kendo.observable({    fooValue: "foo",    barValue: "bar"}); kendo.bind($("div"), viewModel);</script>========================最后介绍远程数据=============================<script>var sharableDataSource = new kendo.data.DataSource({     transport: {         read: {             url: "data-service.json",             dataType: "json"         }     } }); var dataSource = new kendo.data.DataSource({    transport: {    read: {        url: "http://t.sogx.cn/api/data/getQzxx.php",        dataType: "jsonp",        data: {        q: "html5"        }    }    },    schema : {    data : function(d) {        return d.data;   //响应到页面的数据    },    total : function(d) {        return d.count;   //总条数    }    }});var viewModel = kendo.observable({    products=dataSource;});kendo.bind($("div"), viewModel);</script>====================<?phpheader(‘Content-Type:text/html;charset=GB2312‘);header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-Headers:x-requested-with");include("d:/www.qmlt.com/global.php");require(MODEL_PATH.‘class/common.php‘);$db->query("set character set ‘GB2312‘");$db->query("set names ‘GB2312‘");$q=$_GET[‘q‘];if($q==""){    $sql="select id,name from qm_industry";}else{    $sql="select id,name from qm_job_class where keyid=‘$q‘";}$ku=$db->query($sql);$result=array();$i=0;while($rs=$db->fetch_array($ku)){    $result[‘data‘][$i][‘id‘]=$rs[id];    $result[‘data‘][$i][‘name‘]=(trim(u($rs[name]))!="")?u($rs[name]):"(未命名)";    $i++;}$result[‘count‘]=$i;echo  $_GET[‘callback‘]."(".json_encode($result).")";?>