zoukankan      html  css  js  c++  java
  • Kendo MVVM 数据绑定(一) 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 属性的值,页面上显示的图片也随之发生变化。

    注意:如果需要绑定到 DOM 元素的 value 或 checked 属性,你需要使用 Kendo MVVM 的 value 和 checked 绑定方法。

    attr 绑定也支持设置 HTML5 数据属性绑定,例如:

    <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>
  • 相关阅读:
    vue+antDesign 多个select下拉组件实现已选择项不可用(置灰)
    antd + vue 点击编辑文本切换成可编辑状态(附下拉框)
    antDesign的table组件设置行列样式
    jQuery 效果之显示隐藏
    jQuery 样式操作
    jQuery对象筛选选择器
    jQuery 和DOM对象互相转化方法
    JQuery-01-1
    常见网页特效
    WebApl-javescript-动画函数
  • 原文地址:https://www.cnblogs.com/miaosj/p/10362173.html
Copyright © 2011-2022 走看看