Kendo MVVM 数据绑定(六) 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 绑定。

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

时间: 2024-10-10 01:59:40

Kendo MVVM 数据绑定(六) Html的相关文章

Kendo MVVM 数据绑定(三) Click

Kendo MVVM 数据绑定(三) Click Click 绑定可以把由 ViewModel 定义的方法不绑定到目标 DOM 的 click 事件.当点击目标 DOM 元素时触发 ViewModel 的对应方法.例如: 使用 Click 绑定 <div id="view"> <span data-bind="click: showDescription">Show description</span> <span data

Kendo MVVM 数据绑定(九) 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" }); ken

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

Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元素的 enabled 和 diabled 属性.Disabled/enabled 属性只适用于 input,select 和 textarea 元素,当这些输入元素 disabled 后,用户无法修改其值. <div id="view"> <input type=&quo

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 元素的某个属性, 比如设置

Kendo MVVM 数据绑定(二) Checked

Kendo MVVM 数据绑定(二) Checked Checked 绑定用在 checkbox ()或 radio button ()上.注意: checked 绑定只适用于支持 checked 的 DOM 元素,其它 DOM 元素的值可以使用 value 绑定. 多选钮(Checkedbox) checked 绑定使用 Kendo checked 绑定到 checkbox 时,当 ViewModel 对应的值为 true, Checkbox 显示选中状态,而当用户点击 checkbox 选择

Kendo MVVM 数据绑定(五) Events

Kendo MVVM 数据绑定(五) Events 本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式.Events 绑定支持将 ViewModel 的方法绑定到 DOM 元素的事件处理(如鼠标事件).例如: <div id="view"> <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">S

Kendo MVVM 数据绑定(八) 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, priceC

Kendo MVVM 数据绑定(七) 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"&g

(一) kendo UI 数据绑定种类小结

====================autocomplete自动完成绑定 === === === $("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]); 获取引用对象 var autocomplete = $("#autocomplete").data("kendoAutoComplete"); 该