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>

原文地址:https://www.cnblogs.com/miaosj/p/10362173.html

时间: 02-11

Kendo MVVM 数据绑定(一) attr的相关文章

wpf mvvm使用问题集锦

问题一.usercontrol1控件使用了mvvm数据绑定,usercontrol2也使用了mvvm数据绑定,则 以下是伪代码 <usercontrol2 datacontent="{Binding Viewmodel}"> <usercontrol1 tag="{Binding data}"> </usercontrol1> </usercontrol2> usercontrol1是不能实现数据绑定的,个人猜测原因是

【Dev_WPF】ChartControl的使用

一.前言       本月正好做一些关于工程4D,5D的界面展示,正好要用到Dev控件中的ChartControl控件,也就是图表控件. 折腾了两星期完成了一个比较能说的过去的界面吧.(领导要求高,可能不是这么想的吧,哈哈) 二.ChartControl的UI解读 1 <dxc:ChartControl Name="SheduleBarChart" BorderThickness="0"> 2 3 <dxc:ChartControl.Legend&

100+ 超全的web开发工具和资源

转载出处:https://xituqu.com/170.html 作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化.新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求.测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除.便于后端的开发进程加快和测试.所以我们列出了完整的web开发所需要的工具和资源,助

超全的web开发工具和资源

作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言,并愿意和渴望接受新的挑战,以适应变化.新的挑战可能会包括一些开发上的要求,如利用适应现有的框架来满足业务需求.测试一个网站,能从中知道出了哪些技术上的问题,并且我们针对这些问题进行优化和消除.便于后端的开发进程加快和测试.所以我们列出了完整的web开发所需要的工具和资源,助力开发者提高开发效率!学不止步,让我们努力成为一个优秀的开发者!

web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知,不问自晓,古今行事,未之有也 」 我们都知道如今流行的框架:Vue.Js.AngularJs.ReactJs.已经逐渐应用到各个项目和实际应用中,它们都是MVVM数据驱动框架系列的一种. 在了解MVVM之前,我们先回想一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回想历史.由于网上就可查不少资料,

Github上值得关注的前端项目-转自好友trigkit4

http://microjs.com/# 该网站的资源都托管到了github,microjs.com是一个可以让你选择微型的js类库的网站,该网站里的js库都是压缩后不大于5KB的,非常实用 https://plainjs.com/(10.22更新) The Vanilla JavaScript Repository,该仓库都是用原生js写的插件和组件,很实用.里面的项目也都托管到了github 综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单.star:15

Vue.js:轻量高效的前端组件化方案(转载)

摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发

Silverlight项目笔记1:UI控件与布局、MVVM、数据绑定、await/async、Linq查询、WCF RIA Services、序列化、委托与事件

最近从技术支持转到开发岗,做Silverlight部分的开发,用的Prism+MVVM,框架由同事搭好,目前做的主要是功能实现,用到了一些东西,侧重于如何使用,总结如下:   1.UI控件与布局     2.MVVM     3.数据绑定     4.await/async     5.Linq查询     6.WCF RIA Services     7.序列化     8.委托与事件 1.UI控件与布局 常用的主要是Grid.StackPanel.Border,其中最常用的的是Grid,是一

Note7:MVVM模式之数据绑定

一.资源说明 (1)本文参考自: 一步步走进WPF的MVVM模式(二):数据绑定 WPF之数据绑定总结 二.正文 数据绑定 (Data Binding)是WPF最重要的特性之一,也是实现 MVVM(WPF) 模式的一大支柱. 简而言之,数据绑定就是将两个属性绑定在一起,源属性(source)改变带动目标属性(target)一起改变.这样也减少了事件(Events)的使用. 绑定源可以是任意对象的属性,而目标必须是依赖对象的依赖属性. 绑定源主要分为以下几种场景(后面主要介绍前两种): (1)依赖

Android进阶笔记14:RoboBinding(实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架)

1.RoboBinding RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.从简单的角度看,他移除了如addXXListener(),findViewById()这些不必要的代码,连如BufferKnife那样的InjectView都不需要,因为你的代码一般不需要依赖于这些界面组件信息.下面以一个最简单的AndroidMVVM为例. (1)layout 布局 <LinearLayout xmlns:android="