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 MVVM 数据绑定(六) Html的更多相关文章

  1. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

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

  2. Kendo MVVM 数据绑定(十一) Value

    Kendo MVVM 数据绑定(十一) Value Value 绑定可以把 ViewModel 的某个属性绑定到 DOM 元素或某个 UI 组件的 Value 属性.当用户修改 DOM 元素或 UI ...

  3. Kendo MVVM 数据绑定(十) Source

    Kendo MVVM 数据绑定(十) Source Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素 ...

  4. Kendo MVVM 数据绑定(九) Text

    Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...

  5. Kendo MVVM 数据绑定(八) Style

    Kendo MVVM 数据绑定(八) Style Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性,例如: <span data-bind="sty ...

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

    Kendo MVVM 数据绑定(七) Invisible/Visible Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素.例如: <d ...

  7. Kendo MVVM 数据绑定(五) Events

    Kendo MVVM 数据绑定(五) Events 本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式.Events 绑定支持将 ViewModel 的方法绑定到 D ...

  8. Kendo MVVM 数据绑定(四) Disabled/Enabled

    Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元 ...

  9. Kendo MVVM 数据绑定(三) Click

    Kendo MVVM 数据绑定(三) Click Click 绑定可以把由 ViewModel 定义的方法不绑定到目标 DOM 的 click 事件.当点击目标 DOM 元素时触发 ViewModel ...

随机推荐

  1. git base cli

  2. Obama&nbsp;unveils&nbsp;his&amp;nbsp…

    LAS VEGAS - Declaring that America's immigration system is broken, President Obama on Tuesday called ...

  3. 第一个PyQuery小demo

    1.打开网址https://www.v2ex.com/,查看其源码. 2.打开PyCharm编译器,新建工程c3-11,新建python file,命名为v2ex.py,同时,新建file,命名为v2 ...

  4. UVaLive 4727 Jump (递推)

    题意:约瑟夫环,求最后三个数. 析:f[i] = (f[i-1] + k) % i 这是求最后一个数时候,我们倒着推到第一个数时,只有一个数,所以当只有两个数时,就是另一数, 同理,我们可以求得第三个 ...

  5. HDU - 6415 多校9 Rikka with Nash Equilibrium(纳什均衡+记忆化搜索/dp)

    Rikka with Nash Equilibrium Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 524288/524288 K ...

  6. view如何从action中取得数据和 Html辅助方法

    方式:1使用弱类型取,2,使用强类型,两者的差别在于view页面最上方声明的方式   如果使用弱类型接受来自控制器的数据,在view页面里完全不需要有任何的生命,数据可以从ViewData,ViewB ...

  7. Automake使用(初级)

    工程地址 https://github.com/silvermagic/automakeDev.git 最初工程目录结构 $ vim main.cpp $ vim src/main.cpp ls -l ...

  8. uva11357 Matches

    Matches UVA - 11375 题意: 给你n根matches, 你可以拼出多少个数字0~9. 不必全部用完. 解题思路: 1. 计数题, 本题可以用图来理解. 把"已经使用了i根m ...

  9. 洛谷 P2216 [HAOI2007]理想的正方形

    P2216 [HAOI2007]理想的正方形 题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一 ...

  10. Java程序动态编译Java源文件

    最近接触到公司一个项目,需要将生成的源码动态编译,记录下学习过程. 先贴出官网推荐写法: JavaCompiler.CompilationTask getTask(Writer out,        ...