kendo----學習之路

最新推荐文章于 2019-02-11 15:32:00 发布
最新推荐文章于 2019-02-11 15:32:00 发布
阅读量764 收藏
点赞数 1
分类专栏： kendo前端框架

配置

每个组件可以通过 Data 属性来进行配置，对于配置的属性，只需在属性名前加上 data-前缀就可以做为目标元素的属性进行配置。比如 data-delay=”100″。 对于一些使用 Camel-cased 的属性则是通过添加「-」 ，比如 AutoComplete 的 ignoreCase 的属性可以通过 data-ignore-case 来设置。而对于一些已经是使用 data 前缀的属性则无需再添加 data-前缀。比如 dataTextField 属性可以通过 data-text-field 属性来配置, dataSource 属性可以通过 data-source 属性来配置。对于一些複杂的配置可以通过 JavaScript 对象字面量来配置，比如：data-source=”{data: [{name: ‘John Doe’},{name: ‘Jane Doe’]}”.

如下例：

<div id="container">
    <input data-role="autocomplete"
        data-ignore-case="true"
           data-text-field="name"
        data-source="{data: [{name: 'John Doe'},{name: 'Jane Doe'}]}"
         />
</div>
<script>
    kendo.init($("#container"));

</script>

事件

你也可以通过 data 属性添加对 Kendo UI 组件的事件处理，属性的值被当成一个 JavaScript 函数，其作用域为全局。

如下例：


<div id="container">
    <input data-role="numerictextbox" data-change="numerictextbox_change" />
</div>
<script>
function numerictextbox_change(e) {
    // Handle the "change" event
}
kendo.init($("#container"));
</script>

事件处理函数也可以为一个成员函数，比如 foo.bar 可以看出为 foo 对象的 bar 方法。

例如：


<div id="container">
    <input data-role="numerictextbox" data-change="handler.numerictextbox_change" />
</div>
<script>
var handler = {
    numerictextbox_change: function (e) {
        // Handle the "change" event
    }
};
kendo.init($("#container"));
</script>

数据源

支持数据绑定的 UI 组件的数据源也可以通过 data-source 属性来指定。 这个属性可以 为一个 JavaScript 对象，一个数组或是一个全局变数。

例如：

使用 JavaScript 数组作为数据源。


<div id="container">
    <input data-role="autocomplete" data-source="{data:['One', 'Two']}" />
</div>
<script>
kendo.init($("#container"));
</script>

使用 JavaScript 数组作为数据源。


<div id="container">
    <input data-role="autocomplete" data-source="['One', 'Two']" />
</div>
<script>
kendo.init($("#container"));
</script>

使用一个可以全局访问的变数作为数据源。


<div id="container">
    <input data-role="autocomplete" data-source="dataSource" />
</div>
<script>
var dataSource = new kendo.data.DataSource( {
    data: [ "One", "Two" ]
});
kendo.init($("#container"));
</script>

模板

模板也可以通过 Data 属性来设置，属性的值代表用来定义模板的 Script 元素的 Id。比如：


<div id="container">
    <input data-role="autocomplete"
           data-source="[{firstName:'John', lastName: 'Doe'}, {firstName:'Jane', lastName: 'Doe'}]"
           data-text-field="firstName"
           data-template="template" />
</div>
<script id="template" type="text/x-kendo-template">
    <span>#: firstName # #: lastName #</span>
</script>
<script>
kendo.init($("#container"));
</script>

Kendo UI Validator 概述


<div id="myform">
    <input type="text" name="firstName" required />
    <input type="text" name="lastName" required />
    <button id="save" type="button">Save</button>
</div>

然後，在頁面上添加 Kendo UI Validator，添加在 Script 部分，比如：


// Initialize the Kendo UI Validator on your "form" container
// (NOTE: Does NOT have to be a HTML form tag)
var validator = $("#myform").kendoValidator().data("kendoValidator");

// Validate the input when the Save button is clicked
$("#save").on("click", function() {
    if (validator.validate()) {
        // If the form is valid, the Validator will return true
        save();
    }
});

使用這樣的簡單配置，這些 HTML5 表單校驗在舊版本瀏覽器中也可以工作，並且 Web 應用可以完全控制錯誤信息的顯示和其顯示風格，當點擊「Save” 按鈕後，如果輸入不滿足輸入規則，Kendo UI Validator 顯示合適的錯誤信息， 每個 HTML 元素也可以通過 validatorMessage 定義一個自定義的錯誤信息，比如：


<input type="tel" pattern="\d{10}" validationMessage="Plase enter a ten digit phone number" />

預設支持的校驗規則

輸入項必填規則


<input type="text" name="firstName" required />

輸入必須符合指定的正規表達式


<input type="text" name="twitter" pattern="https?://(?:www\.)?twitter\.com/.+i" />

最大，最小值限制


<input type="number" name="age" min="1" max="42" />

輸入步驟和最大，最小值限制一同使用


<input type="number" name="age" min="1" max="100" step="2" />

輸入為有效的 URL


<input type="url" name="url" />

輸入為有效的 EMail


<input type="email" name="email" />

Kendo UI 特效概述


pageturn:翻頁效果
<script>
    kendo.fx($("#container")).pageturn("horizontal", $(".foo"), $(".bar")).duration(1000).play();
    // or
    // kendo.fx($("#container")).pageturnHorizontal($(".foo"), $(".bar")).play();
</script>
relace:替代效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
  
<style>
    #container {
        position: relative;
        width: 202px;
        height: 202px;
    }

    #step1, #step2  {
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid gray;
        background: #e4e4e4;
    }

    /**
     * Custom swap effect
     */

    /* the initial state of the next element */
    .k-fx-swap.k-fx-start .k-fx-next {
        -webkit-transform: translatex(100%);
        -moz-transform: translatex(100%);
        -ms-transform: translatex(100%);
        transform: translatex(100%);
    }

    /* the final state of the current element */
    .k-fx-swap.k-fx-end .k-fx-current {
        opacity: 0;
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        transform: scale(0.9);
    }
</style>

<div id="container">
    <div id="step1">Questionairre – Step 1</div>
    <div id="step2" style="display: none">Questionairre – Step 2</div>
</div>

<script>
  	$(function(){
    	$("#step1").click(function(){
        kendo.fx("#step2").replace("#step1", "swap").run();
        $("#step2").css("display","block");
        $("#step1").css("display","none");
      });
      	$("#step2").click(function(){
        kendo.fx("#step1").replace("#step2", "swap").run();
           $("#step2").css("display","none");
       	 $("#step1").css("display","block");
      });
    })
    kendo.fx("#step1").replace("#step2", "swap").run();
</script>
</body>
</html>

日历：打开并下载图片


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar();

    var draw = kendo.drawing;

    draw.drawDOM($("#calendar"))
    .then(function(root) {
        // Chaining the promise via then
        return draw.exportImage(root);
    })
    .done(function(data) {
        // Here 'data' is the Base64-encoded image file
        kendo.saveAs({
            dataURI: data,
            fileName: "calendar.png"
        });
    });
</script>
</body>
</html>

Kendo MVVM (一) 概述


Model View ViewModel (MVVM) 是开发人员经常使用的一种设计模式，以实现数据模型（Model）和视图（View）的分离。MVVM 中的 ViewModel 部分负责把模型中的数据对象以某种方便的形式和 View 结合起来（通常是通过数据绑定的方式）。

Kendo MVVM 实现了 MVVN 设计模式，并且支持和 Kendo 框架的其它部分（如UI组件和数据源）的无缝连接。

准备开始

使用 MVVM 模式首先创建 ViewModel 对象，ViewModel 对象代表了可以使用 View 显示的数据对象，Kendo 框架中使用 kendo.observable 函数通过传入 JavaScript 对象的方法来定义一个 ViewModel 对象。比如：


var viewModel = kendo.observable({
    name: "John Doe",
    displayGreeting: function() {
        var name = this.get("name");
        alert("Hello, " + name + "!!!");
    }
});
 kendo.bind($("#view"), viewModel);

然后使用 HTML 创建一个 View，这个 View 包含一个按钮和一个文本框。


<div id="view">
    <input data-bind="value: name" />
    <button data-bind="click: displayGreeting">Display Greeting</button>
</div>

其中文本框(input) 通 过data-bind 属性指明绑定到 ViewModel 对象的 name 域。 此时 name 域值发生变化将会反映到 UI 界面的 Input 输入框内容的变化。反之亦然，当 UI 输入框内容发生变化时，ViewModel 的 name 域也发生变化。 按钮的 click 事件绑定到 ViewModel 的 displayGreeting 方法。

最后，通过 bind 方法将 View 和 ViewModel 绑定起来。




Kendo UI 数据绑定(一) attr


Kendo MVVM 数据绑定(一) attr（绑定当前元素的属性）

Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ，这些属性可以绑定到 DOM 元素或是 Kendo UI 组件的属性。本篇介绍 attr 绑定。attr 支持把 ViewModel 的属性或方法绑定到 DOM 元素的某个属性， 比如设置 hyperlink 的 herf 和 title 属性， image 元素的 src 或 alt 属性。 其基本用法为attr: { attribute1: field1, attribute2: field2 }其中 attribute1 和 attribute2 为 DOM 元素的属性名称， 而 field1,field2 为 ViewModel 对象的值域（属性）的名称。比如：

<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>

在本例中，image 元素的 src 和 alt 属性被绑定到 viewModel 对象的 imageSource 和 imageAlt 属性。 当调用 kendo.bind 方法，image 元素和下面 HTML 元素等效：


<img id="logo" src="/attachments/image/wk/kendouidevelopmenttutorial/kendo-logo.png" alt="Kendo Logo"" />

此时，如果修改 viewModel 的 imageSource 和 imageAlt 属性的值，页面上显示的图片也随之发生变化。



Kendo UI 数据绑定(二) Checked



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
  <input type="radio" value="Red" name="color" data-bind="checked: selectedColor" />Red
<input type="radio" value="Green" name="color" data-bind="checked: selectedColor" />Green
<input type="radio" value="Blue" name="color" data-bind="checked: selectedColor" />Blue
<script>
    var viewModel = kendo.observable({
        selectedColor: "Red"  //默认值
    });

    kendo.bind($("input"), viewModel);
</script>
</body>
</html>

Kendo UI 数据绑定(三) Click


Kendo MVVM 数据绑定(三) Click

Click 绑定可以把由 ViewModel 定义的方法不绑定到目标 DOM 的 click 事件。当点击目标 DOM 元素时触发 ViewModel 的对应方法。例如：

使用 Click 绑定


<div id="view">
    <span data-bind="click: showDescription">Show description</span>
    <span data-bind="visible: isDescriptionShown, text: description"></span>
</div>
<script>
    var viewModel = kendo.observable({
        description: "Description",
        isDescriptionShown: false,
        showDescription: function (e) {
            // show the span by setting isDescriptionShown to true
            this.set("isDescriptionShown", true);
        }
    });

    kendo.bind($("#view"), viewModel);
</script>


Kendo UI 数据绑定(四) Disabled/Enabled


Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元素的 enabled 和 diabled 属性。Disabled/enabled 属性只适用于 input,select 和 textarea 元素，当这些输入元素 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>

注： 对于一些非 boolean 值如：0,null, undefined 会被看作 false ,其它值均当成 true .


Kendo UI 数据绑定(五) Events


Kendo MVVM 数据绑定(五) Events

本篇和 Kendo UI 开发教程(14): Kendo MVVM 数据绑定(三) Click 类似，为事件绑定的一般形式。Events 绑定支持将 ViewModel 的方法绑定到 DOM 元素的事件处理（如鼠标事件）。例如：


<div id="view">
    <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>
    <span data-bind="visible: isDescriptionShown, text: description"></span>
</div>
<script>
    var viewModel = kendo.observable({
        description: "Description",
        isDescriptionShown: false,
        showDescription: function (e) {
            // show the span by setting isDescriptionShown to true
            this.set("isDescriptionShown", true);
        },
        hideDescription: function (e) {
            // hide the span by setting isDescriptionShown to false
            this.set("isDescriptionShown", false);
        }
    });

    kendo.bind($("#view"), viewModel);
</script>

实际上，click 绑定是 events 绑定的一个特例，下面的两种实现是等效的：

<span data-bind="click: clickHandler"></span>

<span data-bind="events: { click: clickHandler }"></span>


Kendo UI 数据绑定(六) Html


Kendo MVVM 数据绑定(六) Html

Html 绑定可以使用 ViewMod e 的属性来设置 DOM 元素的 innerHTML 属性。如果 ViewModel 的属性的数据类型不是字符串，比如（Text， Number 或者 Date),那么会调用 toString() 方法，将这些值转为字符串。注意:如果需要设置 input,textarea 或是 select 的值，需要使用 value 绑定。例如：


<span data-bind="html: name"></span>
<script>
var viewModel = kendo.observable({
    name: "John Doe"
});

kendo.bind($("span"), viewModel);
</script>

这个结果显示如下 html 元素：


<span>John Doe</span>

如果 ViewModel 的值包含 HTML 标记，这些标记和作为最后结果显示出来，比如：


<span data-bind="html: name"></span>
<script>
var viewModel = kendo.observable({
    name: "<strong>John Doe</strong>"
});

kendo.bind($("span"), viewModel);
</script>

显示如下：

John Doe

如果只想显示 ViewModel 的值，可以使用 text 绑定。

Kendo UI 数据绑定(七) Invisible/Visible

Kendo MVVM 数据绑定(七) Invisible/Visible

Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素。例如：


<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);

Kendo UI 数据绑定(八) Style

Kendo MVVM 数据绑定(八) Style

Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性，例如：


<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 ""; //will reset the font weight to its default value
        }
    }
});

kendo.bind($("span"), viewModel);
</script>

这个例子显示：


<span style="color: #00ff00; font-weight: bold">42</span>

42

要注意的是 CSS 属性的名称，如果 CSS 名称中含有连字符（-），比如 font-weight, font-size ,background-color 等，在使用时需要省略到连字符，使用 camel 风格的命名，如 fontWeight, fontSize,backgroundColor 等。

Kendo UI 数据绑定(九) Text


Kendo MVVM 数据绑定(九) Text

Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性，如果需要设置 input,textarea,或 select 的显示，需要使用 value 属性。


<span data-bind="text: name"></span>
<script>
var viewModel = kendo.observable({
    name: "John Doe"
});

kendo.bind($("span"), viewModel);
</script>

本例输出：

John Doe

如果 V iewModel 的值包含 html 标记，这些标记会直接显示出 html 标记，比如：

<span data-bind="text: name"></span>
<script>
var viewModel = kendo.observable({
    name: "<strong>John Doe</strong>"
});

kendo.bind($("span"), viewModel);
</script>

如果需要以粗体显示，则可以使用前面介绍的 html 绑定。

Kendo UI 数据绑定(十) Source


Kendo MVVM 数据绑定(十) Source

Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定，如果 ViewModel 的值发生变化，被绑定的目标元素也随之发生变化。模板由属性 data-template 指定，它的值为某个 script 定义的模板的 id. 如果没有指明模板，则根据元素的标记使用缺省的模版。

Source 绑定到数组

当 ViewModel 的值 为一数组时，那么通过 Source 绑定到模板时，会把数组中每个元素逐个应用到模板，最后的输出为应用这些模板的结果的综合。 添加删除数组中的内容，显示的内容也随之变化。

注：绑定到 ViewModel 数组时，Source 指明的为单个跟元素名称，例如：


<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>

这个例子会输出三个 li 元素–每个对应到 products 数组中一个元素，下面为输出的 HTML 内容：


<ul>
    <li>
        id: <span>1</span>
        name: <span>Coffee</span>
    </li>
    <li>
        id: <span>2</span>
        name: <span>Tea</span>
    </li>
    <li>
        id: <span>3</span>
        name: <span>Juice</span>
    </li>
</ul>

如果 ViewModel 绑定的数组的内容为简单类型（如数字，字符串，日期），这时在模板中需要使用 ”this” 关键字来引用当前数组项：


<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>

输出内容如下：


<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Juice</li>
</ul>

Source绑定到非数组

source 绑定也支持绑定到非数组值，此时在模板中引用到 ViewModel 的某个属性，最终的结果为模板使用 ViewModel 后的结果。

<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>
    Name: <span>John Doe</span>
</div>

你也可以直接绑定到 ViewModel 对象本身，此时可以使用把 source 的值设置为 “this” ，例如：

<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>

结果如下：


<div>
Name: <span>John Doe</span>
</div>

Source 绑定 Select 元素

当数组绑定到 select 元素时，就创建多个 option 元素。


<select data-bind="source: colors"></select>
<script>
var viewModel = kendo.observable({
    colors: [ "Red", "Green", "Blue" ]
});

kendo.bind($("select"), viewModel);
</script>

输出的 HTML 元素如下：

<select>
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
</select>

select 元素也可以绑定到 JavaScript 对象数组（非简单类型），此时可以同时指定 data-text-field,data-value-field 用来指定 option 元素的 value 和 text 属性，例如：


<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>

输出如下:


<select>
    <option value="1">Coffee</option>
    <option value="2">Tea</option>
    <option value="3">Juice</option>
</select>

Kendo UI 数据绑定(十一) Value

由  小路依依 创建， 最后一次修改  2016-08-12

Kendo MVVM 数据绑定(十一) Value

Value 绑定可以把 ViewModel 的某个属性绑定到 DOM 元素或某个 UI 组件的 Value 属性。当用户修改 DOM 元素或 UI 组件的值时，绑定的 ViewModel 的值也随之发生改名。同样，如果 ViewModel 的值发生变化，对应的 UI 也会发生变化。注： Value 绑定只可以用在支持 Value 属性的 DOM 元素或 UI 组件。支持 Value 绑定的元素有 input,textarea 和 select, 支持value绑定的 UI 组件有 AutoComplete, DropDownlist, ComboBox, DatePicker, TimePicker,NumbericTextBox 和 Slider.如果你需要设置 DOM 元素或 UI 组件的文本或是 HTML 内容，请使用 text 和 html 绑定。对于Checkboxes () 或 radio button()请使用 checked 绑定。

Input 和 textarea Value 绑定


<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>

上面代码当调用 bind 方法后，input 元素显示 inputValue 的值，而 textarea 显示 textareaValue 的值。 如果用户修改 input 或 textarea 的值，对应的 inputValue 和 textareaValue 也随之变化。

缺省情况下，Value 绑定依赖于 DOM 的 change 事件，也就是当 DOM 元素失去焦点时触发该事件，UI 的变化实现对 ViewModel 的更新。然而可以通过修改 data-value-update 属性来使用不同的 DOM 事件，比如 keyup 或 keypress 事件（不可使用 keydown 事件，只是因为 keydown 事件 DOM 元素的 value 尚未发生变化）。


<div id="view">
    <input data-value-update="keyup" data-bind="value: inputValue" />
</div>
<script>
var viewModel = kendo.observable({
    inputValue: "Input value"
});

kendo.bind($("#view"), viewModel);
</script>

Select 元素绑定 value

当 Select 元素使用了预定义的选项时，Kendo MVVM 将根据 ViewModel 的值把和 ViewModel 值相同的 option 选项设定为选中状态。

<select data-bind="value: selectedColor">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>
<script>
var viewModel = kendo.observable({
    selectedColor: "green"
});

kendo.bind($("select"), viewModel);
</script>

在本例中，第二个选项（Green)被选中，这是因为它的 value 和 selectedColor 相同。 UI修改选项也会更新 selectedColor 的值。 如果 option 元素没有定义 value，那么使用 option 的 text 属性。

如果 select 支持多项选择，此时对应的 ViewModel 的属性也应该为一个数组。例如：


<select data-bind="value: selectedColors" multiple="multiple">
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
</select>
<script>
var viewModel = kendo.observable({
    selectedColors: ["Blue","Green"]
});

kendo.bind($("select"), viewModel);
</script>






laizhixue
关注
专栏目录
kendoui saveAsExcel 参数处理及说明
QQ1845517170的博客
03-16 2005
文章目录网址链接及代码使用参数说明allPagesfileNamefilterablecollapsibleforceProxyproxyURL关于saveAsExcel()及导出 网址链接及代码 kendoui文档网址 kendoui Dojo测试 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kendo UI Snippet</title>
Laravel开发-laravel-kendo-helpers
08-28
在本文中，我们将深入探讨如何在 Laravel 开发中利用 `laravel-kendo-helpers` 这一工具，它专门设计用于将 Kendo UI 的参数解析为 Eloquent ORM（对象关系映射）的查询构建器，使得在 Laravel 应用中集成 Kendo UI ...
kendo ui学习资料
11-26
kendo ui的学习资料，适用初学者进行全局的了解和掌握，有各种例子
kendo的学习站
钢ge的博客
01-06 518
kendo的资料太少中文网 中文网demo http://www.kendoui.io/examples/grid/editing-custom-validation.html中文网API http://www.kendoui.io/kendo-ui/api/javascript/ui/grid.html#events-detailInit英文网demo http://demos.tele
Kendo 学习笔记
chelen_jak的专栏
12-23 1391
1.使用jQuery的方法将一个HTML元素转换成一个Kendo UI控件 方法： $(“#datepicker”).kendoDatePicker();             Kendo UI Web                                                                     $(
Kendo UI开发教程 9 Kendo UI Validator 概述
bcghgfr的博客
11-10 236
Kendo UI开发教程 9 Kendo UI Validator 概述
react-kendo-test.js
05-01
在本项目中，我们关注的是一个名为"react-kendo-test.js"的...通过这个项目，开发者可以学习到React组件化开发、ES6语法的应用、Kendo UI for React组件的使用，以及如何编写有效的测试用例来确保代码的质量和稳定性。
Laravel开发-laravel-kendo-ui
08-28
通过学习和应用这个项目，开发者能够提升Laravel应用的前端体验，创建出既有美观界面又具备高效性能的Web应用。在实践中不断探索和理解这两个强大工具的结合，将极大地提高开发效率和项目质量。
wicket-kendo-ui-6.8.0.zip
10-15
【标题】"wicket-kendo-ui-6.8.0.zip" 暗示了这是一个与Web开发相关的开源项目，具体来说是Wicket框架与Kendo UI库的结合。Wicket是一个基于Java的服务器端Web应用程序框架，它以其组件模型和强健的可测试性而受到...
wicket-kendo-ui-6.13.1.zip
10-13
6. **开源社区参与**：学习如何参与和贡献开源项目，如提交bug报告、提出改进建议或编写代码，是提高技术能力并扩大影响力的好方式。 7. **版本控制**：了解Git的基础知识，如分支、合并、提交和拉取请求，对于管理...
kendo.all.min.js
09-02
kendo.all.min.js,kendu ui 基础控件，单个js配合jquery就可以使用
Kendo UI官方demo
04-30
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。 Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。
最新kendoUI前端框架
03-12
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。 Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。
KendoUI 自定义验证：
mk363255751的专栏
12-21 509
KendoUI 自定义验证： Html： <label>@LogicNameAttribute.GetLogicName(typeof(Reward).GetProperty("ExtraRewardMoney"))</label> @Html.TextBoxFor(m => m.ExtraRewardMoney,...
（9）kendo UI使用基础介绍与问题整理——Validator/基础说明、实例介绍
weixin_34401479的博客
03-19 166
一、基本使用方法介绍 官网链接地址 demo：https://demos.telerik.com/kendo-ui/validator/index 文档：https://docs.telerik.com/kendo-ui/api/javascript/ui/validator 简单demo：供参考 <form ...
Kendo UI Validator 概述
weixin_30894583的博客
02-11 142
Kendo UI Validator 概述 Kendo UI Validator 支持了客戶端校驗的便捷方法，它基於 HTML 5 的表單校驗功能，支持很多內置的校驗規則，同時也提供了自定義規則的便捷方法。 HTML 5 表單校驗 HTML5 的一項重要功能是HTML 5 表單校驗屬性， 通過設置限制屬性為 HTML 輸入設置輸入類型，值域等，然後由瀏覽器來檢查輸入是否合法。 支持的幾種規則...
Kendo UI 必输验证出现部分选项不显示的问题
henry的专栏
04-11 1557
做了好几年的EBS的二次开发，最近转到WEB开发去了，终于有一种跟世界接上轨的感觉，新项目有用到kendo ui这个前端框架，简单的看了几篇菜鸟入门教程，就上手撸代码，复制粘贴撸的飞起，本着啥不会就百度的原则。刚好要加验证，就翻官方教程，不幸粗心大意给自己挖了坑。 先贴一下官方的例子连接 https://demos.telerik.com/kendo-ui/validator/index ...
使用Kendo 输入验证的几种方法
钢ge的博客
12-05 3170
1.在schema 的字段下面写eg：KendoUI | 国内最新的KendoUI官方示例 2.在columns 后面写 eg：JS Bin - Collaborative JavaScript Debugging “popup”弹出方式自己手动改成图示的代码。3.放在验证函数kendo-ui表单验证 - 推酷 http://www.tuicool.com/articles/UFBrM
kendoValidator 验证
abza7117的博客
07-18 264
表单验证最重要的是验证规则中的自定义验证，即rules，返回的消息都在messages中. 下面demo我以数字、邮箱、时间举例说明： HTML: <form action="?" id="requrest-form"> <!-- 数字验证 --> <input type="number" name="number" requi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值